# Item ```mdx

Basic Item

A simple item with title and description.

Your profile has been verified.
``` ## Usage Import Tailwind and one full Basecoat style bundle. ```css @import "tailwindcss"; @import "basecoat-css/vega.css"; ``` Or import only the base CSS, the component CSS files it composes, and one style pack. ```css @import "tailwindcss"; @import "basecoat-css/base.css"; @import "basecoat-css/components/item.css"; @import "basecoat-css/components/button.css"; @import "basecoat-css/styles/vega.css"; ``` Item composes Button styles when actions are rendered as buttons. Using CDN or bundler imports? See the [Installation page](/installation). Add `class="item"` to a semantic element such as `
` or ``. Use `class="item-group"` when listing multiple items. ```html

Basic Item

A simple item with title and description.

``` #### HTML structure
<article class="item"> or <a 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.
<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 ```mdx

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

``` ### Size ```mdx

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 ```mdx

Security Alert

New login detected from unknown device.

``` ### Avatar ```mdx
Evil Rabbit

Evil Rabbit

Last seen 5 months ago

@evilrabbit

No Team Members

Invite your team to collaborate on this project.

``` ### Image ```mdx
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 ```mdx
@shadcn

shadcn

shadcn@vercel.com

@maxleiter

maxleiter

maxleiter@vercel.com

@evilrabbit

evilrabbit

evilrabbit@vercel.com

``` ### Header ```mdx
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.

``` ### Link ```mdx

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.
``` ### Dropdown ```mdx
``` ### RTL ```mdx

عنصر أساسي

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

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