Item

A versatile component that can be used to display any content

Theme
<sa-item variant="ItemVariant.Outline">
    <sa-item-content>
        <sa-item-title>Flight to Paris</sa-item-title>
        <sa-item-description>
            Departs 10:15, Gate A4
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            View Details
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-item-link variant="ItemVariant.Outline" size="ItemSize.Small" href="#">
    <sa-item-media>
        <sa-icon name="luggage" class="size-5"/>
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>Baggage policy updated.</sa-item-title>
    </sa-item-content>
    <sa-item-actions>
        <sa-icon name="chevron-right" class="size-4"/>
    </sa-item-actions>
</sa-item-link>

Usage

<sa-item variant="...">
    <sa-item-header>
        ...
    </sa-item-header>
    <sa-item-media>
        ...
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>...</sa-item-title>
        <sa-item-description>...</sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        ...
    </sa-item-actions>
    <sa-item-footer>
        ...
    </sa-item-footer>
</sa-item>

Examples

Elements

The following demo demonstrates all the various elements you can use.

Theme
<sa-item variant="ItemVariant.Outline">
  <sa-item-content>
    <sa-item-title>Title Only</sa-item-title>
  </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-content>
    <sa-item-title>Title + Button</sa-item-title>
  </sa-item-content>
  <sa-item-actions>
    <sa-button variant="ButtonVariant.Outline">Action</sa-button>
  </sa-item-actions>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-content>
    <sa-item-title>Title + Description</sa-item-title>
    <sa-item-description>
      This is a description that provides additional context.
    </sa-item-description>
  </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-content>
    <sa-item-title>Title + Description + Button</sa-item-title>
    <sa-item-description>
      This item includes a title, description, and action button.
    </sa-item-description>
  </sa-item-content>
  <sa-item-actions>
    <sa-button variant="ButtonVariant.Outline">Action</sa-button>
  </sa-item-actions>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-media variant="ItemMediaVariant.Icon">
    <sa-icon name="inbox"/>
  </sa-item-media>
  <sa-item-content>
    <sa-item-title>Media + Title</sa-item-title>
  </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-media variant="ItemMediaVariant.Icon">
    <sa-icon name="inbox"/>
  </sa-item-media>
  <sa-item-content>
    <sa-item-title>Media + Title + Button</sa-item-title>
  </sa-item-content>
  <sa-item-actions>
    <sa-button size="ButtonSize.Small">Action</sa-button>
  </sa-item-actions>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-media variant="ItemMediaVariant.Icon">
    <sa-icon name="inbox"/>
  </sa-item-media>
  <sa-item-content>
    <sa-item-title>Media + Title + Description</sa-item-title>
    <sa-item-description>
      This item includes media, title, and description.
    </sa-item-description>
  </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-media variant="ItemMediaVariant.Icon">
    <sa-icon name="inbox"/>
  </sa-item-media>
  <sa-item-content>
    <sa-item-title>Media + Title + Description + Button</sa-item-title>
    <sa-item-description>
      Complete item with all components: media, title, description, and
      button.
    </sa-item-description>
  </sa-item-content>
  <sa-item-actions>
    <sa-button size="ButtonSize.Small">Action</sa-button>
  </sa-item-actions>
</sa-item>
<sa-item variant="ItemVariant.Outline">
  <sa-item-content>
    <sa-item-title>Multiple Actions</sa-item-title>
    <sa-item-description>
      Item with multiple action buttons in the actions area.
    </sa-item-description>
  </sa-item-content>
  <sa-item-actions>
    <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
      Cancel
    </sa-button>
    <sa-button size="ButtonSize.Small">Confirm</sa-button>
  </sa-item-actions>
</sa-item>

Variant

Set variant to ItemVariant.Outline or ItemVariant.Muted. The default has a subtle background.

Theme
<sa-item>
    <sa-item-content>
        <sa-item-title>Default Variant</sa-item-title>
        <sa-item-description>
            Standard styling with subtle background and borders.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            Open
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-item variant="ItemVariant.Outline">
    <sa-item-content>
        <sa-item-title>Outline Variant</sa-item-title>
        <sa-item-description>
            Outlined style with clear borders and transparent background.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            Open
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-item variant="ItemVariant.Muted">
    <sa-item-content>
        <sa-item-title>Muted Variant</sa-item-title>
        <sa-item-description>
            Subdued appearance with muted colors for secondary content.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            Open
        </sa-button>
    </sa-item-actions>
</sa-item>

Size

The Item Tag Helper has different sizes for different use cases. For example, you can use the Small size for a compact item or the default size for a standard item.

Theme
<sa-item variant="ItemVariant.Outline">
    <sa-item-content>
        <sa-item-title>Default Size</sa-item-title>
        <sa-item-description>
            The default size has comfortable spacing
        </sa-item-description>
    </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline" size="ItemSize.Small">
    <sa-item-content>
        <sa-item-title>Small Size</sa-item-title>
        <sa-item-description>
            The small size is for more compact items
        </sa-item-description>
    </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline" size="ItemSize.ExtraSmall">
    <sa-item-content>
        <sa-item-title>Extra Small Size</sa-item-title>
        <sa-item-description>
            Extra Small size is the most compact
        </sa-item-description>
    </sa-item-content>
</sa-item>

Clickable items

If you want to make the entire item clickable, use <sa-item-link> instead of <sa-item>.

Theme
<sa-item-link asp-controller="Booking" asp-action="Manage" asp-route-id="123">
    <sa-item-content>
        <sa-item-title>Manage My Booking</sa-item-title>
        <sa-item-description>
            View, change, or cancel your existing reservations.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-icon name="chevron-right" class="size-4"/>
    </sa-item-actions>
</sa-item-link>
<sa-item-link variant="ItemVariant.Outline" href="#" target="_blank" rel="noopener noreferrer">
    <sa-item-content>
        <sa-item-title>View Current Visa Requirements</sa-item-title>
        <sa-item-description>
            Opens the official government travel site in a new tab.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-icon name="external-link" class="size-4"/>
    </sa-item-actions>
</sa-item-link>

The URL can be specified a couple of ways:

  1. You can use the href property to specify any valid URL as per the href property of the anchor element.
  2. You can use any of the attributes that are valid for specifying the URL for the ASP.NET Core Anchor Tag Helper, such as asp-controller, asp-action, asp-page, etc. Please refer to the Anchor Tag Helper documentation for more examples.

Group

Wrap items in <sa-item-group> container to group them together.

Theme
<sa-item-group>
    <sa-item variant="ItemVariant.Outline">
        <sa-item-media variant="ItemMediaVariant.Icon">
            <sa-icon name="inbox"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Flights</sa-item-title>
            <sa-item-description>Manage flight bookings and seat selections.</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item variant="ItemVariant.Outline">
        <sa-item-media variant="ItemMediaVariant.Icon">
            <sa-icon name="inbox"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Hotels</sa-item-title>
            <sa-item-description>Manage hotel reservations and room preferences.</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item variant="ItemVariant.Outline">
        <sa-item-media variant="ItemMediaVariant.Icon">
            <sa-icon name="inbox"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Transfers</sa-item-title>
            <sa-item-description>Manage airport pickups and private cars.</sa-item-description>
        </sa-item-content>
    </sa-item>
</sa-item-group>

Separator

Items can be separated with <sa-item-separator>.

Theme
<sa-item-group>
    <sa-item variant="ItemVariant.Outline">
        <sa-item-media variant="ItemMediaVariant.Icon">
            <sa-icon name="inbox"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Enquiries</sa-item-title>
            <sa-item-description>View all new booking enquiries.</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item-separator/>
    <sa-item variant="ItemVariant.Outline">
        <sa-item-media variant="ItemMediaVariant.Icon">
            <sa-icon name="inbox"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Quotes</sa-item-title>
            <sa-item-description>View all quotes sent to clients.</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item-separator/>
    <sa-item variant="ItemVariant.Outline">
        <sa-item-media variant="ItemMediaVariant.Icon">
            <sa-icon name="inbox"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Drafts</sa-item-title>
            <sa-item-description>View all itineraries still being drafted.</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item-separator/>
    <sa-item variant="ItemVariant.Outline">
        <sa-item-media variant="ItemMediaVariant.Icon">
            <sa-icon name="inbox"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Archive</sa-item-title>
            <sa-item-description>View archived bookings and enquiries.</sa-item-description>
        </sa-item-content>
    </sa-item>
</sa-item-group>

Add an <sa-item-header> above the content for a category or eyebrow.

Theme
<sa-item>
    <sa-item-header>
        <span class="text-sm font-medium">City Break</span>
    </sa-item-header>
    <sa-item-content>
        <sa-item-title>Marrakech</sa-item-title>
        <sa-item-description>
            Four nights in a riad in the medina with return flights and a
            guided walking tour.
        </sa-item-description>
    </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline">
    <sa-item-header>
        <span class="text-sm font-medium">Beach Holiday</span>
    </sa-item-header>
    <sa-item-content>
        <sa-item-title>Zanzibar</sa-item-title>
        <sa-item-description>
            Seven nights on the east coast with half board, snorkelling trips
            and a spice farm tour.
        </sa-item-description>
    </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Muted">
    <sa-item-header>
        <span class="text-sm font-medium">Expedition</span>
    </sa-item-header>
    <sa-item-content>
        <sa-item-title>Patagonia</sa-item-title>
        <sa-item-description>
            Twelve days of guided hiking in Torres del Paine with refugio
            accommodation.
        </sa-item-description>
    </sa-item-content>
</sa-item>

Add an <sa-item-footer> below the content for metadata.

Theme
<sa-item>
    <sa-item-content>
        <sa-item-title>Marrakech City Break</sa-item-title>
        <sa-item-description>
            Four nights in a riad in the medina with return flights and a
            guided walking tour.
        </sa-item-description>
    </sa-item-content>
    <sa-item-footer>
        <span class="text-muted-foreground text-sm">
            Last updated 2 hours ago
        </span>
    </sa-item-footer>
</sa-item>
<sa-item variant="ItemVariant.Outline">
    <sa-item-content>
        <sa-item-title>Japan in Cherry Blossom Season</sa-item-title>
        <sa-item-description>
            Two weeks from Tokyo to Osaka with three nights in a Kyoto ryokan
            and rail passes throughout.
        </sa-item-description>
    </sa-item-content>
    <sa-item-footer>
        <span class="text-muted-foreground text-sm">
            Created by Ibn Battuta
        </span>
    </sa-item-footer>
</sa-item>
<sa-item variant="ItemVariant.Muted">
    <sa-item-content>
        <sa-item-title>Patagonia Trekking Expedition</sa-item-title>
        <sa-item-description>
            Twelve days of guided hiking in Torres del Paine with refugio
            accommodation.
        </sa-item-description>
    </sa-item-content>
    <sa-item-footer>
        <span class="text-muted-foreground text-sm">12 comments</span>
    </sa-item-footer>
</sa-item>

Header and footer can be combined on the same item.

Theme
<sa-item>
    <sa-item-header>
        <span class="text-sm font-medium">Group Booking</span>
    </sa-item-header>
    <sa-item-content>
        <sa-item-title>Okonkwo Family Japan Trip</sa-item-title>
        <sa-item-description>
            Two weeks from Tokyo to Osaka for four travellers during cherry
            blossom season.
        </sa-item-description>
    </sa-item-content>
    <sa-item-footer>
        <span class="text-muted-foreground text-sm">
            Updated 5 minutes ago
        </span>
    </sa-item-footer>
</sa-item>
<sa-item variant="ItemVariant.Outline">
    <sa-item-header>
        <span class="text-sm font-medium">Corporate Travel</span>
    </sa-item-header>
    <sa-item-content>
        <sa-item-title>Lisbon Sales Conference</sa-item-title>
        <sa-item-description>
            Flights and hotel rooms for twelve delegates, with airport transfers
            on both days.
        </sa-item-description>
    </sa-item-content>
    <sa-item-footer>
        <span class="text-muted-foreground text-sm">
            Status: Awaiting approval
        </span>
    </sa-item-footer>
</sa-item>
<sa-item variant="ItemVariant.Muted">
    <sa-item-header>
        <span class="text-sm font-medium">Honeymoon</span>
    </sa-item-header>
    <sa-item-content>
        <sa-item-title>Maldives Overwater Villa</sa-item-title>
        <sa-item-description>
            Ten nights of all-inclusive luxury with a seaplane transfer and a
            private sunset cruise.
        </sa-item-description>
    </sa-item-content>
    <sa-item-footer>
        <span class="text-muted-foreground text-sm">
            Category: Luxury • 3 attachments
        </span>
    </sa-item-footer>
</sa-item>

Image

Use <sa-item-media variant="ItemMediaVariant.Image"> to show a thumbnail.

Theme
<sa-item variant="ItemVariant.Outline">
    <sa-item-media variant="ItemMediaVariant.Image">
        <img src="/gradients/gradient-1.jpg" class="w-[40px] h-[40px] object-cover grayscale" />
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>Trip Overview</sa-item-title>
        <sa-item-description>
            Dates, travellers and booking status at a glance.
        </sa-item-description>
    </sa-item-content>
</sa-item>
<sa-item variant="ItemVariant.Outline">
    <sa-item-media variant="ItemMediaVariant.Image">
        <img src="/gradients/gradient-1.jpg" class="w-[40px] h-[40px] object-cover grayscale" />
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>Travel Insurance Policy</sa-item-title>
        <sa-item-description>Policy document with cover details and emergency contacts.</sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            View
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-item variant="ItemVariant.Outline">
    <sa-item-media variant="ItemMediaVariant.Image">
        <img src="/gradients/gradient-1.jpg" class="w-[40px] h-[40px] object-cover grayscale" />
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>E-tickets</sa-item-title>
        <sa-item-description>
            Boarding passes and booking confirmation for all travellers.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button size="ButtonSize.Small">Download</sa-button>
    </sa-item-actions>
</sa-item>

API Reference

<sa-item>

Renders a <div> element.

Prop

Type

Renders an <a> element styled as an item, making the entire item clickable.

Prop

Type

Routing attributes

The link item also accepts the same routing attributes as the ASP.NET Core Anchor Tag Helper for generating the href. Supply either an href or these attributes — not both.

Prop

Type

<sa-item-group>

Renders a <div> element with role="list" that groups items together, forwarding any global attributes.

<sa-item-header>

Renders a <div> element for the item header, forwarding any global attributes.

<sa-item-media>

Renders a <div> element that hosts an icon, image, or avatar.

Prop

Type

<sa-item-content>

Renders a <div> element that groups the item title and description, forwarding any global attributes.

<sa-item-title>

Renders a <div> element for the item title, forwarding any global attributes.

<sa-item-description>

Renders a <p> element for the item description, forwarding any global attributes.

<sa-item-actions>

Renders a <div> element that hosts buttons or other actions, forwarding any global attributes.

Renders a <div> element for the item footer, forwarding any global attributes.

<sa-item-separator>

Renders a horizontal separator (a <div> with role="separator") between items, forwarding any global attributes.

Icon

Displays an SVG icon from the Lucide icon toolkit

Kbd

Displays keystrokes or keyboard shortcuts

On this page

UsageExamplesElementsVariantSizeClickable itemsGroupSeparatorHeaderFooterHeader and footerImageAPI Reference<sa-item><sa-item-link>Routing attributes<sa-item-group><sa-item-header><sa-item-media><sa-item-content><sa-item-title><sa-item-description><sa-item-actions><sa-item-footer><sa-item-separator>