Item

A flexible container for displaying content with media, title, description, and actions.

Basic

A simple item with title and description.

Notifications

Manage your notification preferences.

<Item>
    <ItemContent>
        <ItemTitle>Notifications</ItemTitle>
        <ItemDescription>Manage your notification preferences.</ItemDescription>
    </ItemContent>
</Item>

With Icon

Use ItemMedia with the Icon variant to display an icon.

Notifications

You have 3 unread messages.

<Item>
    <ItemMedia Variant="ItemMediaVariant.Icon">
        <BellIcon />
    </ItemMedia>
    <ItemContent>
        <ItemTitle>Notifications</ItemTitle>
        <ItemDescription>You have 3 unread messages.</ItemDescription>
    </ItemContent>
</Item>

With Actions

Add actions like buttons to the right side.

Settings

Configure your application settings.

<Item>
    <ItemMedia Variant="ItemMediaVariant.Icon">
        <SettingsIcon />
    </ItemMedia>
    <ItemContent>
        <ItemTitle>Settings</ItemTitle>
        <ItemDescription>Configure your application settings.</ItemDescription>
    </ItemContent>
    <ItemActions>
        <Button Variant="ButtonVariant.Outline" Size="ButtonSize.Sm">Edit</Button>
    </ItemActions>
</Item>

Variants

Use the Variant parameter to change the visual style.

Default

With a visible border.

Ghost

No border, transparent background.

Muted

Subtle muted background.

<Item Variant="ItemVariant.Default">...</Item>
<Item Variant="ItemVariant.Ghost">...</Item>
<Item Variant="ItemVariant.Muted">...</Item>

Group

Use ItemGroup and ItemSeparator to group related items.

Profile

Manage your profile settings.

Security

Update your password and security settings.

Notifications

Configure notification preferences.

<ItemGroup>
    <Item>
        <ItemMedia Variant="ItemMediaVariant.Icon">
            <UserIcon />
        </ItemMedia>
        <ItemContent>
            <ItemTitle>Profile</ItemTitle>
            <ItemDescription>Manage your profile settings.</ItemDescription>
        </ItemContent>
    </Item>
    <ItemSeparator />
    <Item>
        <ItemMedia Variant="ItemMediaVariant.Icon">
            <LockIcon />
        </ItemMedia>
        <ItemContent>
            <ItemTitle>Security</ItemTitle>
            <ItemDescription>Update your password and security.</ItemDescription>
        </ItemContent>
    </Item>
</ItemGroup>

Sizes

Use the Size parameter to control item density.

Default size

Standard padding and gaps.

Small size

Compact padding and gaps.

<Item Size="ItemSize.Default">
    <ItemContent>
        <ItemTitle>Default size</ItemTitle>
        <ItemDescription>Standard padding and gaps.</ItemDescription>
    </ItemContent>
</Item>
<Item Size="ItemSize.Sm">
    <ItemContent>
        <ItemTitle>Small size</ItemTitle>
        <ItemDescription>Compact padding and gaps.</ItemDescription>
    </ItemContent>
</Item>