For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.3.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.3.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.3.0/en/components/item.md.
A3S UI
  • English
  • v0.3.0

      • Item

      Live preview

      Basic Item

      A simple item with title and description.

      Your profile has been verified.

      Usage

      Include CSS

      Import Tailwind and one full A3S UI style bundle.

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      Or import only the base CSS, the component CSS files it composes, and one style pack.

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/item.css";
@import "@a3s-lab/ui/components/status-badge.css";
@import "@a3s-lab/ui/components/button.css";
@import "@a3s-lab/ui/styles/a3s.css";

      Item composes Button styles when actions are rendered as buttons.

      Using CDN or bundler imports? See the Installation page.

      Add your item HTML

      Add class="item" to a semantic element such as <article> or <a>. Use class="item-group" when listing multiple items.

      <article class="item" data-variant="outline">
  <section>
    <h3>Basic Item</h3>
    <p>A simple item with title and description.</p>
  </section>
  <aside>
    <button class="btn" data-variant="outline" data-size="sm">Action</button>
  </aside>
</article>

      Use inline content markers when the whole item is a native button; sectioning elements are not valid button children.

      <button type="button" class="item" data-variant="outline">
  <span data-item-content><strong>run_01JY7K</strong><small>Exact Agent release</small></span>
  <span data-item-actions><span class="status-badge" data-state="active">Running</span></span>
</button>

      HTML structure

      <article class="item">, <a class="item">, or <button class="item">

      The item root. Use data-variant="outline|muted" and data-size="sm|xs" when needed.

      <figure> Optional
      Media: icon, avatar, or image.
      <section>

      Primary content. Headings and paragraphs are styled automatically.

      <h2>, <h3>, or <h4>
      The item title.
      <p> Optional
      The item description.
      <aside> Optional
      Actions or trailing metadata.
      [data-item-content], [data-item-actions] Button items
      Inline content and trailing metadata for a native button root.
      <header>, <footer> Optional
      Full-width item regions.
      <div class="item-group" role="list"> Optional
      Groups related items. Use role="listitem" on child items when they are not native list items.

      Item vs Field

      Use field for form controls and validation. Use item for display content, actions, and navigation rows.

      Variant

      Live preview

      Default Variant

      Transparent background with no border.

      Outline Variant

      Outlined style with a visible border.

      Muted Variant

      Muted background for secondary content.

      Size

      Live preview

      Default Size

      The standard size for most use cases.

      Small Size

      A compact size for dense layouts.

      Extra Small Size

      The most compact size available.

      Examples

      Icon

      Live preview

      Security Alert

      New login detected from unknown device.

      Avatar

      Live preview
      Evil Rabbit

      Evil Rabbit

      Last seen 5 months ago

      @evilrabbit

      No Team Members

      Invite your team to collaborate on this project.

      Image

      Live preview
      Midnight City Lights

      Midnight City Lights - Electric Nights

      Neon Dreams

      3:45

      Coffee Shop Conversations

      Coffee Shop Conversations - Urban Stories

      The Morning Brew

      4:05

      Digital Rain

      Digital Rain - Binary Beats

      Cyber Symphony

      3:30

      Group

      Live preview
      Live preview
      v0-1.5-sm

      v0-1.5-sm

      Everyday tasks and UI generation.

      v0-1.5-lg

      v0-1.5-lg

      Advanced thinking or reasoning.

      v0-2.0-mini

      v0-2.0-mini

      Open Source model for everyone.

      Live preview

      Visit our documentation

      Learn how to get started with our components.

      External resource

      Opens in a new tab with security attributes.

      Live preview

      RTL

      Live preview

      عنصر أساسي

      عنصر بسيط يحتوي على عنوان ووصف.

      تم التحقق من ملفك الشخصي.