Item
A versatile list item component for displaying structured content with media, titles, descriptions, and actions.
Basic Usage
Loading...
ItemList item variations
Installation
The Item component is part of the UI package.
Usage
import {
Item,
ItemGroup,
ItemMedia,
ItemContent,
ItemTitle,
ItemDescription,
ItemActions,
} from "@mordecai-design-system/ui"<ItemGroup>
<Item>
<ItemMedia variant="icon">
<UserIcon />
</ItemMedia>
<ItemContent>
<ItemTitle>John Doe</ItemTitle>
<ItemDescription>Software Engineer</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="ghost" size="sm">Edit</Button>
</ItemActions>
</Item>
</ItemGroup>Examples
Basic Item
<Item>
<ItemContent>
<ItemTitle>Item Title</ItemTitle>
<ItemDescription>Item description text</ItemDescription>
</ItemContent>
</Item>With Icon
<Item>
<ItemMedia variant="icon">
<FileIcon />
</ItemMedia>
<ItemContent>
<ItemTitle>Document.pdf</ItemTitle>
<ItemDescription>2.4 MB</ItemDescription>
</ItemContent>
</Item>With Image
<Item>
<ItemMedia variant="image">
<img src="..." alt="Product" />
</ItemMedia>
<ItemContent>
<ItemTitle>Product Name</ItemTitle>
<ItemDescription>$99.00</ItemDescription>
</ItemContent>
</Item>Sizes
<Item size="xs">Extra small</Item>
<Item size="sm">Small</Item>
<Item size="default">Default</Item>Variants
<Item variant="default">Default (transparent)</Item>
<Item variant="outline">With border</Item>
<Item variant="muted">Muted background</Item>Sub-components
| Component | Description |
|-----------|-------------|
| Item | Root container |
| ItemGroup | Groups multiple items |
| ItemMedia | Icon or image container |
| ItemContent | Main content area |
| ItemTitle | Title text |
| ItemDescription | Description text |
| ItemActions | Action buttons container |
| ItemHeader | Header section |
| ItemFooter | Footer section |
| ItemSeparator | Visual separator |
Props
Item
| Prop | Type | Default | Description |
|---|---|---|---|
| render | enum | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| variant | enum | default | — |
| size | enum | default | — |
ItemMedia
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | enum | default | — |