Item
A row with media, a title, a description and actions, alone or in a list.
Basic
A title, a description and an action.
Basic item
A simple item with a title and a description.
Code
<Item variant="outline" title="Basic item" description="A simple item with a title and a description.">
<ItemActions><Button size="sm">Action</Button></ItemActions>
</Item>Usage
import { Item, ItemGroup, ItemSeparator, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter } from "@elements/ui/item";
<Item variant="outline">
<ItemMedia variant="icon"><Icon name="shield" /></ItemMedia>
<ItemContent>
<ItemTitle>Security alert</ItemTitle>
<ItemDescription>New sign-in from an unknown device.</ItemDescription>
</ItemContent>
<ItemActions><Button size="sm">Review</Button></ItemActions>
</Item>
<Item href="/settings/profile" title="Your profile" description="Name, photo and email." />Examples
Variants
default, outline and muted.
Default
Transparent, no border.
Outline
A visible border.
Muted
A muted fill.
Code
<Item title="Default" description="Transparent, no border." />
<Item variant="outline" title="Outline" description="A visible border." />
<Item variant="muted" title="Muted" description="A muted fill." />Sizes
md, sm and xs tighten the padding and gap.
Default size
Small
Extra small
Code
<Item variant="outline" title="Default size" />
<Item variant="outline" size="sm" title="Small" />
<Item variant="outline" size="xs" title="Extra small" />Icon
An icon tile, with an action.
Security alert
New sign-in from an unknown device in a city you have not used before. If this was not you, review your sessions and change your password right away.
Code
<Item variant="outline">
<ItemMedia variant="icon"><Icon name="shield" /></ItemMedia>
<ItemContent>
<ItemTitle>Security alert</ItemTitle>
<ItemDescription>New sign-in from an unknown device.</ItemDescription>
</ItemContent>
<ItemActions><Button size="sm" variant="primary">Review</Button></ItemActions>
</Item>Avatar
Avatars as media.
Evil Rabbit
Last seen 5 months ago
No team members
Invite your team to collaborate on this project.
Code
<Item variant="outline">
<ItemMedia variant="avatar"><Avatar alt="Evil Rabbit" /></ItemMedia>
<ItemContent>
<ItemTitle>Evil Rabbit</ItemTitle>
<ItemDescription>Last seen 5 months ago</ItemDescription>
</ItemContent>
<ItemActions><Button size="sm" icon label="Invite Evil Rabbit"><Icon name="plus" /></Button></ItemActions>
</Item>
<Item variant="outline">
<ItemMedia variant="avatar">
<AvatarGroup><Avatar alt="Ada Lovelace" /><Avatar alt="Grace Hopper" /></AvatarGroup>
</ItemMedia>
<ItemContent>
<ItemTitle>No team members</ItemTitle>
<ItemDescription>Invite your team to collaborate on this project.</ItemDescription>
</ItemContent>
<ItemActions><Button size="sm"><Icon name="plus" /> Invite</Button></ItemActions>
</Item>Image
Square thumbnails in a list of link items.
Code
<ItemGroup gap label="Tracks">
<Item e:for={t of tracks} variant="outline" href="#">
<ItemMedia variant="image"><img src={t.cover} alt=""></ItemMedia>
<ItemContent>
<ItemTitle>{t.title}</ItemTitle>
<ItemDescription>{t.artist}</ItemDescription>
</ItemContent>
<ItemContent class="none"><span>{t.time}</span></ItemContent>
</Item>
</ItemGroup>Group
A list of people with separators.
Ada Lovelace
ada@example.com
Grace Hopper
grace@example.com
Katherine Johnson
katherine@example.com
Invite by email
They get a link to join.
Code
<ItemGroup label="People">
<Item size="sm">
<ItemMedia><Avatar alt="Ada Lovelace" /></ItemMedia>
<ItemContent>
<ItemTitle>Ada Lovelace</ItemTitle>
<ItemDescription>ada@example.com</ItemDescription>
</ItemContent>
<ItemActions><Button variant="ghost" icon size="sm" label="Add Ada Lovelace"><Icon name="plus" /></Button></ItemActions>
</Item>
<ItemSeparator />
<Item size="sm">
<ItemMedia><Avatar alt="Grace Hopper" /></ItemMedia>
...
</Item>
<ItemSeparator />
<Item size="sm" title="Invite by email" description="They get a link to join." />
</ItemGroup>Header and footer
Full lines above and below the row.
Atlas v2 New
A general model for text and images.
Code
<Item variant="outline">
<ItemHeader><img src="..." alt=""></ItemHeader>
<ItemContent>
<ItemTitle>Atlas v2 <Badge variant="accent">New</Badge></ItemTitle>
<ItemDescription>A general model for text and images.</ItemDescription>
</ItemContent>
<ItemFooter><span>128k context</span><span>Updated 2 days ago</span></ItemFooter>
</Item>Link
href makes the row a link; attrs pass target and rel.
Code
<Item href="/ui/card" variant="outline" title="Visit our docs" description="Read the guides.">
<ItemActions><Icon name="chevron-right" /></ItemActions>
</Item>
<Item href="https://example.com" attrs={{ target: "_blank", rel: "noopener" }} ...>
<ItemActions><Icon name="external-link" /></ItemActions>
</Item>With a select
A control in ItemActions.
Ada Lovelace
ada@example.com
Code
<Item variant="outline">
<ItemMedia><Avatar alt="Ada Lovelace" /></ItemMedia>
<ItemContent><ItemTitle>Ada Lovelace</ItemTitle><ItemDescription>ada@example.com</ItemDescription></ItemContent>
<ItemActions>
<select value={state.role} class="is-sm"><option>Viewer</option><option>Editor</option><option>Owner</option></select>
</ItemActions>
</Item>Dropdown
Items as the rows of a DropdownMenu: a person picker.
Code
<DropdownMenu align="start">
<Button slot="trigger">{state.owner || "Select"} <Icon name="chevron-down" /></Button>
<DropdownMenuLabel>Assign an owner</DropdownMenuLabel>
<DropdownMenuItem e:for={p of people} e:key={(p) => p.email} textValue={p.name} onSelect={() => state.owner = p.name}>
<Item size="xs">
<ItemMedia><Avatar size="sm" alt={p.name} /></ItemMedia>
<ItemContent>
<ItemTitle>{p.name}</ItemTitle>
<ItemDescription>{p.email}</ItemDescription>
</ItemContent>
</Item>
</DropdownMenuItem>
</DropdownMenu>RTL
Media at the inline start, actions at the inline end, mirrored under dir=rtl.
عنصر أساسي
عنصر بسيط بعنوان ووصف.
Code
<div dir="rtl">
<Item variant="outline" title="عنصر أساسي" description="عنصر بسيط بعنوان ووصف.">
<ItemActions><Button size="sm">إجراء</Button></ItemActions>
</Item>
</div>