Item

Generic content row primitive with media, content, and action regions

Category: display · WCAG 2.2-AA · row, primitive, list-item, layout

Variants

default
muted

Sizes

Props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	When true, renders the child element as the root via Slot, merging props (polymorphic rendering).
`variant`	`'default' \| 'muted'`	`default`	Selects the visual style variant.
`size`	`'sm' \| 'md'`	`md`	Visual size of the component (e.g. 'sm', 'md', 'lg').

Design tokens

--cascivo-color-text
--cascivo-color-text-subtle
--cascivo-color-bg-subtle
--cascivo-radius-item
--cascivo-space-3

When to use

Composing a single content row with leading media, a text block, and trailing actions
Building list, menu, or card rows from a consistent layout primitive
Slotting a row onto a real anchor or button via asChild for navigation or selection

When not to use

A full surface with elevation and padding regions — use Card
Key-value metadata pairs — use DataList

How to build an accessible Item in React →

Examples

Item with media, content, and actions

<Item>
  <ItemMedia><Avatar /></ItemMedia>
  <ItemContent>
    <ItemTitle>Ada Lovelace</ItemTitle>
    <ItemDescription>Mathematician</ItemDescription>
  </ItemContent>
  <ItemActions><Button size="sm">Edit</Button></ItemActions>
</Item>

As a link via asChild

<Item asChild>
  <a href="/profile">
    <ItemContent><ItemTitle>Profile</ItemTitle></ItemContent>
  </a>
</Item>

Related components

Card — Card is a padded surface; Item is a lightweight horizontal row
ContainedListItem — ContainedListItem is bound to a contained list; Item is a free-standing row

← Back to docs