View as Markdown

Item

A versatile component for displaying content with media, title, description, and actions.

Loading... 
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Content>
            <twig:Item:Title>Basic Item</twig:Item:Title>
            <twig:Item:Description>
                A simple item with title and description.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="outline" size="sm">
                Action
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline" size="sm" as="a" href="#">
        <twig:Item:Media>
            <twig:ux:icon name="lucide:badge-check" class="size-5" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Your profile has been verified.</twig:Item:Title>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>

Installation

php bin/console ux:install item --kit shadcn

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your app:

{# @prop variant &#039;default&#039;|&#039;outline&#039;|&#039;muted&#039; The visual style variant. #}
{# @prop size &#039;default&#039;|&#039;sm&#039;|&#039;xs&#039; The item size. #}
{# @prop as &#039;div&#039; The HTML tag to render. #}
{# @block content The item content, typically includes `Item:Media`, `Item:Content`, and/or `Item:Actions`. #}
{%- props variant = &#039;default&#039;, size = &#039;default&#039;, as = &#039;div&#039; -%}
{%- set style = html_cva(
    base: &#039;group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted&#039;,
    variants: {
        variant: {
            default: &#039;border-transparent&#039;,
            outline: &#039;border-border&#039;,
            muted: &#039;border-transparent bg-muted/50&#039;,
        },
        size: {
            default: &#039;gap-2.5 px-3 py-2.5&#039;,
            sm: &#039;gap-2.5 px-3 py-2.5&#039;,
            xs: &#039;gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0&#039;,
        },
    },
    default_variant: {
        variant: &#039;default&#039;,
        size: &#039;default&#039;,
    },
) -%}

&lt;{{ as }}
    data-slot=&quot;item&quot;
    data-variant=&quot;{{ variant }}&quot;
    data-size=&quot;{{ size }}&quot;
    class=&quot;{{ style.apply({variant: variant, size: size}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/{{ as }}&gt;

{# @block content The action buttons or controls for the item. #}
&lt;div
    data-slot=&quot;item-actions&quot;
    class=&quot;{{ (&#039;flex items-center gap-2 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @block content The main content area, typically includes `Item:Title` and `Item:Description`. #}
&lt;div
    data-slot=&quot;item-content&quot;
    class=&quot;{{ (&#039;flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&amp;+[data-slot=item-content]]:flex-none &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @block content The descriptive text of the item. #}
&lt;p
    data-slot=&quot;item-description&quot;
    class=&quot;{{ (&#039;line-clamp-2 text-left rtl:text-start text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 [&amp;&gt;a:hover]:text-primary &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/p&gt;

{# @block content The footer area, typically contains metadata or secondary actions. #}
&lt;div
    data-slot=&quot;item-footer&quot;
    class=&quot;{{ (&#039;flex basis-full items-center justify-between gap-2 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @block content The grouped items, typically multiple `Item` components. #}
&lt;div
    role=&quot;list&quot;
    data-slot=&quot;item-group&quot;
    class=&quot;{{ (&#039;group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @block content The header area, typically contains title and actions. #}
&lt;div
    data-slot=&quot;item-header&quot;
    class=&quot;{{ (&#039;flex basis-full items-center justify-between gap-2 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @prop variant &#039;default&#039;|&#039;icon&#039;|&#039;image&#039; The media display style. #}
{# @block content The visual element, typically an icon or image. #}
{%- props variant = &#039;default&#039; -%}
{%- set style = html_cva(
    base: &#039;flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&amp;_svg]:pointer-events-none&#039;,
    variants: {
        variant: {
            default: &#039;bg-transparent&#039;,
            icon: &quot;[&amp;_svg:not([class*=&#039;size-&#039;])]:size-4&quot;,
            image: &#039;size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&amp;_img]:size-full [&amp;_img]:object-cover&#039;,
        },
    },
    default_variant: {
        variant: &#039;default&#039;,
    },
) -%}

&lt;div
    data-slot=&quot;item-media&quot;
    data-variant=&quot;{{ variant }}&quot;
    class=&quot;{{ style.apply({variant: variant}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @prop orientation &#039;horizontal&#039;|&#039;vertical&#039; The separator orientation. #}
{# @prop decorative bool Whether the separator is purely decorative (not semantic). #}
{%- props orientation = &#039;horizontal&#039;, decorative = true -%}
&lt;twig:Separator
    orientation=&quot;{{ orientation }}&quot;
    decorative=&quot;{{ decorative }}&quot;
    class=&quot;{{ (&#039;my-2 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ ...attributes }}
/&gt;

{# @block content The title text of the item. #}
&lt;div
    data-slot=&quot;item-title&quot;
    class=&quot;{{ (&#039;line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @prop orientation &#039;horizontal&#039;|&#039;vertical&#039; The separator orientation. #}
{# @prop decorative boolean Whether the separator is purely decorative (not semantic). #}
{%- props orientation = &#039;horizontal&#039;, decorative = true -%}
&lt;div
    class=&quot;{{ (&#039;shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes.defaults({
        &#039;data-slot&#039;: &#039;separator&#039;,
        &#039;data-orientation&#039;: orientation,
        role: decorative ? &#039;none&#039; : &#039;separator&#039;,
        &#039;aria-orientation&#039;: decorative ? false : orientation,
    }) }}
&gt;&lt;/div&gt;

Usage

<twig:Item>
    <twig:Item:Media variant="icon">
        <twig:ux:icon name="lucide:inbox" />
    </twig:Item:Media>
    <twig:Item:Content>
        <twig:Item:Title>Title</twig:Item:Title>
        <twig:Item:Description>Description</twig:Item:Description>
    </twig:Item:Content>
    <twig:Item:Actions>
        <twig:Button>Action</twig:Button>
    </twig:Item:Actions>
</twig:Item>

Examples

Variant

Use the variant prop to change the visual style of the item.

Loading... 
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item>
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Default Variant</twig:Item:Title>
            <twig:Item:Description>
                Transparent background with no border.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Outline Variant</twig:Item:Title>
            <twig:Item:Description>
                Outlined style with a visible border.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="muted">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Muted Variant</twig:Item:Title>
            <twig:Item:Description>
                Muted background for secondary content.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
</div>

Size

Use the size prop to change the size of the item. Available sizes are default, sm, and xs.

Loading... 
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Default Size</twig:Item:Title>
            <twig:Item:Description>
                The standard size for most use cases.
            </twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="outline" size="sm">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Small Size</twig:Item:Title>
            <twig:Item:Description>A compact size for dense layouts.</twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
    <twig:Item variant="outline" size="xs">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:inbox" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Extra Small Size</twig:Item:Title>
            <twig:Item:Description>The most compact size available.</twig:Item:Description>
        </twig:Item:Content>
    </twig:Item>
</div>

Icon

Use Item:Media with variant="icon" to display an icon.

Loading... 
<div class="flex w-full max-w-lg flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media variant="icon">
            <twig:ux:icon name="lucide:shield-alert" />
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Security Alert</twig:Item:Title>
            <twig:Item:Description>
                New login detected from unknown device.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="sm" variant="outline">
                Review
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</div>

Avatar

Use Item:Media to display an avatar.

Loading... 
<div class="flex w-full max-w-lg flex-col gap-6">
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar class="size-10">
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="ER" />
                <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>Evil Rabbit</twig:Item:Title>
            <twig:Item:Description>
                Last seen 5 months ago
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="icon-sm" variant="outline" class="rounded-full" aria-label="Invite">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>

    <twig:Item variant="outline">
        <twig:Item:Media>
            <div class="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
                <twig:Avatar class="hidden sm:flex">
                    <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" />
                    <twig:Avatar:Fallback>CN</twig:Avatar:Fallback>
                </twig:Avatar>
                <twig:Avatar class="hidden sm:flex">
                    <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
                    <twig:Avatar:Fallback>LR</twig:Avatar:Fallback>
                </twig:Avatar>
                <twig:Avatar>
                    <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
                    <twig:Avatar:Fallback>ER</twig:Avatar:Fallback>
                </twig:Avatar>
            </div>
        </twig:Item:Media>
        <twig:Item:Content>
            <twig:Item:Title>No Team Members</twig:Item:Title>
            <twig:Item:Description>
                Invite your team to collaborate on this project.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button size="sm" variant="outline">
                Invite
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</div>

Image

Use Item:Media with variant="image" to display an image.

Loading... 
<div class="flex w-full max-w-md flex-col gap-6">
    <twig:Item:Group class="gap-4">
        <twig:Item variant="outline" as="a" href="#" role="listitem">
            <twig:Item:Media variant="image">
                <img src="https://avatar.vercel.sh/Midnight+City+Lights" alt="Midnight City Lights" class="object-cover grayscale" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>Midnight City Lights - <span class="text-muted-foreground">Electric Nights</span></twig:Item:Title>
                <twig:Item:Description>Neon Dreams</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none text-center">
                <twig:Item:Description>3:45</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline" as="a" href="#" role="listitem">
            <twig:Item:Media variant="image">
                <img src="https://avatar.vercel.sh/Coffee+Shop" alt="Coffee Shop Conversations" class="object-cover grayscale" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>Coffee Shop Conversations - <span class="text-muted-foreground">Urban Stories</span></twig:Item:Title>
                <twig:Item:Description>The Morning Brew</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none text-center">
                <twig:Item:Description>4:05</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline" as="a" href="#" role="listitem">
            <twig:Item:Media variant="image">
                <img src="https://avatar.vercel.sh/Digital+Rain" alt="Digital Rain" class="object-cover grayscale" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>Digital Rain - <span class="text-muted-foreground">Binary Beats</span></twig:Item:Title>
                <twig:Item:Description>Cyber Symphony</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Content class="flex-none text-center">
                <twig:Item:Description>3:30</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
    </twig:Item:Group>
</div>

Group

Use Item:Group to group related items together.

Loading... 
<twig:Item:Group class="max-w-sm">
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/shadcn.png" alt="@shadcn" class="grayscale" />
                <twig:Avatar:Fallback>S</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content class="gap-1">
            <twig:Item:Title>shadcn</twig:Item:Title>
            <twig:Item:Description>shadcn@vercel.com</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="ghost" size="icon" class="rounded-full">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/maxleiter.png" alt="@maxleiter" class="grayscale" />
                <twig:Avatar:Fallback>M</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content class="gap-1">
            <twig:Item:Title>maxleiter</twig:Item:Title>
            <twig:Item:Description>maxleiter@vercel.com</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="ghost" size="icon" class="rounded-full">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline">
        <twig:Item:Media>
            <twig:Avatar>
                <twig:Avatar:Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" class="grayscale" />
                <twig:Avatar:Fallback>E</twig:Avatar:Fallback>
            </twig:Avatar>
        </twig:Item:Media>
        <twig:Item:Content class="gap-1">
            <twig:Item:Title>evilrabbit</twig:Item:Title>
            <twig:Item:Description>evilrabbit@vercel.com</twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:Button variant="ghost" size="icon" class="rounded-full">
                <twig:ux:icon name="lucide:plus" />
            </twig:Button>
        </twig:Item:Actions>
    </twig:Item>
</twig:Item:Group>

Header

Use Item:Header to add a header above the item content.

Loading... 
<div class="flex w-full max-w-xl flex-col gap-6">
    <twig:Item:Group class="grid grid-cols-3 gap-4">
        <twig:Item variant="outline">
            <twig:Item:Header>
                <img
                    src="https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop"
                    alt="v0-1.5-sm"
                    class="aspect-square w-full rounded-sm object-cover"
                />
            </twig:Item:Header>
            <twig:Item:Content>
                <twig:Item:Title>v0-1.5-sm</twig:Item:Title>
                <twig:Item:Description>Everyday tasks and UI generation.</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline">
            <twig:Item:Header>
                <img
                    src="https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop"
                    alt="v0-1.5-lg"
                    class="aspect-square w-full rounded-sm object-cover"
                />
            </twig:Item:Header>
            <twig:Item:Content>
                <twig:Item:Title>v0-1.5-lg</twig:Item:Title>
                <twig:Item:Description>Advanced thinking or reasoning.</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
        <twig:Item variant="outline">
            <twig:Item:Header>
                <img
                    src="https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop"
                    alt="v0-2.0-mini"
                    class="aspect-square w-full rounded-sm object-cover"
                />
            </twig:Item:Header>
            <twig:Item:Content>
                <twig:Item:Title>v0-2.0-mini</twig:Item:Title>
                <twig:Item:Description>Open Source model for everyone.</twig:Item:Description>
            </twig:Item:Content>
        </twig:Item>
    </twig:Item:Group>
</div>

Link

Use the as prop to render the item as a link. The hover and focus states will be applied to the anchor element.

Loading... 
<div class="flex w-full max-w-md flex-col gap-4">
    <twig:Item as="a" href="#">
        <twig:Item:Content>
            <twig:Item:Title>Visit our documentation</twig:Item:Title>
            <twig:Item:Description>
                Learn how to get started with our components.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:chevron-right" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
    <twig:Item variant="outline" as="a" href="#" target="_blank" rel="noopener noreferrer">
        <twig:Item:Content>
            <twig:Item:Title>External resource</twig:Item:Title>
            <twig:Item:Description>
                Opens in a new tab with security attributes.
            </twig:Item:Description>
        </twig:Item:Content>
        <twig:Item:Actions>
            <twig:ux:icon name="lucide:external-link" class="size-4" />
        </twig:Item:Actions>
    </twig:Item>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

Loading... 
<div class="flex flex-col gap-8 w-full items-center">
    {# Arabic #}
    <div class="flex w-full max-w-md flex-col gap-6" dir="rtl">
        <twig:Item variant="outline" dir="rtl">
            <twig:Item:Content>
                <twig:Item:Title>عنصر أساسي</twig:Item:Title>
                <twig:Item:Description>عنصر بسيط يحتوي على عنوان ووصف.</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:Button variant="outline" size="sm">إجراء</twig:Button>
            </twig:Item:Actions>
        </twig:Item>
        <twig:Item variant="outline" size="sm" as="a" href="#" dir="rtl">
            <twig:Item:Media>
                <twig:ux:icon name="lucide:badge-check" class="size-5" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>تم التحقق من ملفك الشخصي.</twig:Item:Title>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:ux:icon name="lucide:chevron-right" class="size-4" />
            </twig:Item:Actions>
        </twig:Item>
    </div>

    {# Hebrew #}
    <div class="flex w-full max-w-md flex-col gap-6" dir="rtl">
        <twig:Item variant="outline" dir="rtl">
            <twig:Item:Content>
                <twig:Item:Title>ערך בסיסי</twig:Item:Title>
                <twig:Item:Description>ערך עם כותרת ותיאור.</twig:Item:Description>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:Button variant="outline" size="sm">בצע</twig:Button>
            </twig:Item:Actions>
        </twig:Item>
        <twig:Item variant="outline" size="sm" as="a" href="#" dir="rtl">
            <twig:Item:Media>
                <twig:ux:icon name="lucide:badge-check" class="size-5" />
            </twig:Item:Media>
            <twig:Item:Content>
                <twig:Item:Title>החשבון שלך אומת.</twig:Item:Title>
            </twig:Item:Content>
            <twig:Item:Actions>
                <twig:ux:icon name="lucide:chevron-right" class="size-4" />
            </twig:Item:Actions>
        </twig:Item>
    </div>
</div>

API Reference

<twig:Item>

Prop Type Default
variant 
 'default'|'outline'|'muted' 'default'
size 
 'default'|'sm'|'xs' 'default'
as 
 'div' 'div'
Block Description
content The item content, typically includes Item:Media, Item:Content, and/or Item:Actions.

<twig:Item:Actions>

Block Description
content The action buttons or controls for the item.

<twig:Item:Content>

Block Description
content The main content area, typically includes Item:Title and Item:Description.

<twig:Item:Description>

Block Description
content The descriptive text of the item.

<twig:Item:Footer>

Block Description
content The footer area, typically contains metadata or secondary actions.

<twig:Item:Group>

Block Description
content The grouped items, typically multiple Item components.

<twig:Item:Header>

Block Description
content The header area, typically contains title and actions.

<twig:Item:Media>

Prop Type Default
variant 
 'default'|'icon'|'image' 'default'
Block Description
content The visual element, typically an icon or image.

<twig:Item:Separator>

Prop Type Default
orientation 
 'horizontal'|'vertical' 'horizontal'
decorative 
 bool true

<twig:Item:Title>

Block Description
content The title text of the item.