Item
List row primitive. Composes ItemMedia, ItemContent (with ItemTitle and ItemDescription), ItemActions, and ItemFooter into a flexible row that fits navigation lists, settings, and contact cards.
Default
Media + content + actions.
Send notifications to device.
Stacked list
Group items inside ItemGroup with ItemSeparator.
Manage your personal info.
Email and push preferences.
Password and 2FA.
Variants
Item supports default, outline, and muted visual styles.
The standard row style.
Bordered for emphasis.
Subtle filled background.
Variant styles
Each variant value paired with a trailing action.
The standard row style.
Bordered for emphasis.
Subtle filled background.
Sizes
Item supports default, sm, and xs padding densities.
Comfortable padding.
Tighter padding.
Densest padding.
With icon
Lead the row with an icon inside ItemMedia variant="icon".
Manage payment methods and invoices.
With avatar
ItemMedia holds an Avatar for people and account rows.
m@example.com
With image
ItemMedia variant="image" frames a thumbnail-style placeholder.
1280 × 720 · PNG
Grouped rows
A bordered ItemGroup with several Items divided by ItemSeparator.
2.4 MB
820 KB
48 KB
Header and footer
ItemHeader and ItemFooter add full-width rows above and below the content.
Unlimited projects and 20 seats for your team.
As a link
Render the whole row as a link with as-child and an anchor element.
With dropdown actions
ItemActions holds a DropdownMenu trigger for per-row menus.
Updated 3 hours ago.