Basic Item
A simple item with title and description.
Item
Usage
Include CSS
Import Tailwind and one full A3S UI style bundle.
Or import only the base CSS, the component CSS files it composes, and one style pack.
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.
HTML structure
<article class="item">or<a class="item">The item root. Use
data-variant="outline|muted"anddata-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.
<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
Default Variant
Transparent background with no border.
Outline Variant
Outlined style with a visible border.
Muted Variant
Muted background for secondary content.
Size
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
Security Alert
New login detected from unknown device.
Avatar
Evil Rabbit
Last seen 5 months ago
No Team Members
Invite your team to collaborate on this project.
Image
Group
Header
v0-1.5-sm
Everyday tasks and UI generation.
v0-1.5-lg
Advanced thinking or reasoning.
v0-2.0-mini
Open Source model for everyone.
Link
Dropdown
RTL
عنصر أساسي
عنصر بسيط يحتوي على عنوان ووصف.