Item

A versatile and composable component for displaying items in a list or grid. It can be used to build complex layouts with media, content, and actions.

Variants

Items can have different visual styles using the `Variant` parameter.

Source

<div class="flex flex-col gap-6">
    <RzItem>
        <ItemContent>
            <ItemTitle>Default Variant</ItemTitle>
            <ItemDescription>Standard styling with subtle background and borders.</ItemDescription>
        </ItemContent>
        <ItemActions>
            <RzButton Variant="ThemeVariant.Primary" Outline="true" Size="Size.Small">Open</RzButton>
        </ItemActions>
    </RzItem>
    <RzItem Variant="ItemVariant.Outline">
        <ItemContent>
            <ItemTitle>Outline Variant</ItemTitle>
            <ItemDescription>Outlined style with clear borders and transparent background.</ItemDescription>
        </ItemContent>
        <ItemActions>
            <RzButton Variant="ThemeVariant.Primary" Outline="true" Size="Size.Small">Open</RzButton>
        </ItemActions>
    </RzItem>
    <RzItem Variant="ItemVariant.Muted">
        <ItemContent>
            <ItemTitle>Muted Variant</ItemTitle>
            <ItemDescription>Subdued appearance with muted colors for secondary content.</ItemDescription>
        </ItemContent>
        <ItemActions>
            <RzButton Variant="ThemeVariant.Primary" Outline="true" Size="Size.Small">Open</RzButton>
        </ItemActions>
    </RzItem>
</div>

Sizes

The `Item` component has different sizes. Use `Size="Size.Small"` for a compact item or `Size="Size.Medium"` (the default) for a standard item.

Source

<div class="flex w-full max-w-md flex-col gap-6">
    <RzItem Variant="ItemVariant.Outline">
        <ItemContent>
            <ItemTitle>Default Size Item</ItemTitle>
            <ItemDescription>A simple item with title and description.</ItemDescription>
        </ItemContent>
        <ItemActions>
            <RzButton Variant="ThemeVariant.Primary" Outline="true" Size="Size.Small">Action</RzButton>
        </ItemActions>
    </RzItem>
    <RzItem Variant="ItemVariant.Outline" Size="Size.Small" AsChild="true">
        <a href="#">
            <ItemMedia>
                <Blazicon Svg="MdiIcon.CheckDecagram" class="text-xl" />
            </ItemMedia>
            <ItemContent>
                <ItemTitle>Your profile has been verified.</ItemTitle>
            </ItemContent>
            <ItemActions>
                <Blazicon Svg="MdiIcon.ChevronRight" class="text-lg" />
            </ItemActions>
        </a>
    </RzItem>
</div>

With Icon

Use the `ItemMedia` component with `Variant="ItemMediaVariant.Icon"` to display an icon.

Source

<RzItem Variant="ItemVariant.Outline">
    <ItemMedia Variant="ItemMediaVariant.Icon">
        <Blazicon Svg="MdiIcon.ShieldAlert" class="text-lg"/>
    </ItemMedia>
    <ItemContent>
        <ItemTitle>Security Alert</ItemTitle>
        <ItemDescription>New login detected from unknown device.</ItemDescription>
    </ItemContent>
    <ItemActions>
        <RzButton Size="Size.Small" Variant="ThemeVariant.Primary" Outline="true">Review</RzButton>
    </ItemActions>
</RzItem>

With Avatar

Display an `RzAvatar` inside the `ItemMedia` component.

Source

<RzItem Variant="ItemVariant.Outline">
    <ItemMedia>
        <RzAvatar Size="Size.Medium">
            <AvatarImage ImageSource="https://github.com/evilrabbit.png" />
            <AvatarFallback>ER</AvatarFallback>
        </RzAvatar>
    </ItemMedia>
    <ItemContent>
        <ItemTitle>Evil Rabbit</ItemTitle>
        <ItemDescription>Last seen 5 months ago</ItemDescription>
    </ItemContent>
    <ItemActions>
        <RzButton Size="Size.Small" class="rounded-full size-10"><Blazicon Svg="MdiIcon.Plus" class="text-xl"/></RzButton>
    </ItemActions>
</RzItem>

Component Parameters

The following tables summarize the main parameters for each `Item` component.

RzItem

Property	Type	Default	Description
`Variant`	`ItemVariant`	`Default`	The visual style of the item.
`Size`	`Size`	`Medium`	The size of the item, affecting padding and gaps. `Medium` maps to 'default' and `Small` maps to 'sm'.
`AsChild`	`bool`	`false`	Merges behavior into a single child element instead of rendering a `div`.

ItemMedia

Property	Type	Default	Description
`Variant`	`ItemMediaVariant`	`Default`	The style variant for the media container (e.g., for an icon or image).

The components `RzItemGroup`, `RzItemSeparator`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`, `ItemHeader`, and `ItemFooter` primarily accept `ChildContent` and pass through any additional attributes. They have no unique parameters beyond standard HTML attributes.