elements
Manual UI Templates Item

Item

elements man ui/templates/item

A row with media, a title, a description and actions, alone or in a list.

Example
import {
  Item, ItemGroup, ItemSeparator, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions,
  ItemHeader, ItemFooter,
} from "@elements/ui/item";
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";

<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." />

Parts

Part What it is
ItemGroup .item-group, role=list.
ItemSeparator .item-separator, a decorative rule.
ItemMedia .item-media: an icon tile, a thumbnail, an avatar.
ItemContent .item-content: title and description, takes the free width.
ItemTitle .item-title.
ItemDescription .item-description, two lines at most.
ItemActions .item-actions: trailing controls.
ItemHeader .item-header: a full line above.
ItemFooter .item-footer: a full line below.

Attributes

Item

Attribute Type Default Description
title string "" Renders a title in ItemContent.
description string "" Renders a description in ItemContent.
variant "default" | "outline" | "muted" "default" Transparent, bordered, or filled.
size "md" | "sm" | "xs" "md" Padding and gap.
href string "" Makes the whole row a link.
class string "" Extra classes.
attrs Record<string, string | number | boolean | undefined> {} Other attributes for the row or link: target, rel, aria-*.

ItemGroup

Attribute Type Default Description
label string "" Names the list.
gap boolean false Space between items.

ItemMedia

Attribute Type Default Description
variant "default" | "icon" | "image" | "avatar" "default" icon is a bordered tile; image a square thumbnail.

every part

Attribute Type Default Description
class string "" Extra classes.

Slots

Slot Part Content
media Item Media for the title shortcut.
default Item Parts in any order.
default each part The part's content.

Keyboard

Keys Action
Tab Focuses a link item, then the controls inside items.
Enter Follows a link item.

Data attributes

Attribute Values On
data-variant "default" | "outline" | "muted" Item
data-size "md" | "sm" | "xs" Item
data-variant "default" | "icon" | "image" | "avatar" ItemMedia

Accessibility

  • ItemGroup is a list and each Item in it a listitem; a link item keeps its link role inside a listitem wrapper.
  • Link items show the theme focus ring and follow on Enter.
  • Icon media is hidden from screen readers; the title says what the row is.

See also