StellarAdmin

Item

A versatile component that can be used to display any content.

<sa-item variant="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="Outline" size="Small">
            View Details
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-link-item variant="Outline" size="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-link-item>

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>

Examples

Variant

<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="Outline" size="Small">
            Open
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-item variant="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="Outline" size="Small">
            Open
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-item variant="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="Outline" size="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.

<sa-item variant="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="Outline" size="Small">
            View Details
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-link-item variant="Outline" size="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-link-item>

Clickable items

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

<sa-link-item 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-link-item>
<sa-link-item variant="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-link-item>

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.

Icon

<sa-item variant="Outline">
    <sa-item-media variant="Icon">
        <sa-icon name="triangle-alert"/>
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>Gate Change Alert</sa-item-title>
        <sa-item-description>
            Your flight is now departing from Gate C12.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button size="Small" variant="Outline">
            Show Map
        </sa-button>
    </sa-item-actions>
</sa-item>

Avatar

<sa-item variant="Outline">
    <sa-item-media>
        <sa-avatar class="size-10" src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Adrian" />
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>The Grand Hotel</sa-item-title>
        <sa-item-description class="italic">"Amazing service and great pool!"</sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button
            size="IconSmall"
            variant="Outline"
            class="rounded-full"
        >
            <sa-icon name="bookmark" />
        </sa-button>
    </sa-item-actions>
</sa-item>
<sa-item variant="Outline">
    <sa-item-media>
        <sa-avatar-group>
            <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Vivian"/>
            <sa-avatar src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Riley" />
            <sa-avatar name="+3" />
        </sa-avatar-group>
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>Family Trip to Florida</sa-item-title>
        <sa-item-description>
            2 adults, 3 children. Seats pre-selected.
        </sa-item-description>
    </sa-item-content>
    <sa-item-actions>
        <sa-button size="Small" variant="Outline">
            Manage
        </sa-button>
    </sa-item-actions>
</sa-item>

Image

<sa-item variant="Outline">
    <sa-item-media>
        <img
            class="object-cover size-12 rounded"
            src="https://images.unsplash.com/photo-1681785841804-4d8a976ee892?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>Non-stop to NYC (JFK)</sa-item-title>
        <sa-item-description>Delta Airlines - 8:00 AM Departure</sa-item-description>
    </sa-item-content>
    <sa-item-content>
        <sa-item-description>$450</sa-item-description>
    </sa-item-content>
</sa-item>
<sa-item variant="Outline">
    <sa-item-media>
        <img
            class="object-cover size-12 rounded"
            src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>The Grand Resort & Spa</sa-item-title>
        <sa-item-description>4.5 Stars ⋅ Free Cancellation</sa-item-description>
    </sa-item-content>
    <sa-item-content>
        <sa-item-description>$189/night</sa-item-description>
    </sa-item-content>
</sa-item>
<sa-item variant="Outline">
    <sa-item-media>
        <img
            class="object-cover size-12 rounded"
            src="https://images.unsplash.com/photo-1557223562-6c77ef16210f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
    </sa-item-media>
    <sa-item-content>
        <sa-item-title>Transfer to Downtown</sa-item-title>
        <sa-item-description>Pick-up at 10:30 AM - Hotel Lobby</sa-item-description>
    </sa-item-content>
    <sa-item-content>
        <sa-item-description>30 min</sa-item-description>
    </sa-item-content>
</sa-item>

Group

Wrap items in an sa-item-group container to group them together. Items can be separated with sa-item-separator.

<sa-item-group>
    <sa-item>
        <sa-item-media>
            <img
                class="object-cover size-12 rounded"
                src="https://images.unsplash.com/photo-1681785841804-4d8a976ee892?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Non-stop to NYC (JFK)</sa-item-title>
            <sa-item-description>Delta Airlines - 8:00 AM Departure</sa-item-description>
        </sa-item-content>
        <sa-item-content>
            <sa-item-description>$450</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item-separator/>
    <sa-item>
        <sa-item-media>
            <img
                class="object-cover size-12 rounded"
                src="https://images.unsplash.com/photo-1551882547-ff40c63fe5fa?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>The Grand Resort & Spa</sa-item-title>
            <sa-item-description>4.5 Stars ⋅ Free Cancellation</sa-item-description>
        </sa-item-content>
        <sa-item-content>
            <sa-item-description>$189/night</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item-separator/>
    <sa-item>
        <sa-item-media>
            <img
                class="object-cover size-12 rounded"
                src="https://images.unsplash.com/photo-1557223562-6c77ef16210f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"/>
        </sa-item-media>
        <sa-item-content>
            <sa-item-title>Transfer to Downtown</sa-item-title>
            <sa-item-description>Pick-up at 10:30 AM - Hotel Lobby</sa-item-description>
        </sa-item-content>
        <sa-item-content>
            <sa-item-description>30 min</sa-item-description>
        </sa-item-content>
    </sa-item>
</sa-item-group>
<sa-item-group class="grid grid-cols-3 gap-4">
    <sa-item variant="Outline">
        <sa-item-header>
            <img
                src="https://images.unsplash.com/photo-1540541338287-41700207dee6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2670"
                class="aspect-square w-full rounded-sm object-cover"/>
        </sa-item-header>
        <sa-item-content>
            <sa-item-title>The Marina Grand Resort</sa-item-title>
            <sa-item-description>Right on the beach with a full-service spa.</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item variant="Outline">
        <sa-item-header>
            <img
                src="https://images.unsplash.com/photo-1618504261618-85b683e3901d?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGNpdHklMjBvbGQlMjBob3RlbHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=800"
                class="aspect-square w-full rounded-sm object-cover"/>
        </sa-item-header>
        <sa-item-content>
            <sa-item-title>Charming City Escape</sa-item-title>
            <sa-item-description>Highly-rated boutique hotel near museums and nightlife.</sa-item-description>
        </sa-item-content>
    </sa-item>
    <sa-item variant="Outline">
        <sa-item-header>
            <img
                src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2596"
                class="aspect-square w-full rounded-sm object-cover"/>
        </sa-item-header>
        <sa-item-content>
            <sa-item-title>Rome, Italy</sa-item-title>
            <sa-item-description>Explore ancient ruins and book a stay in the historic center.</sa-item-description>
        </sa-item-content>
    </sa-item>
</sa-item-group>

Icon

Previous Page

Kbd

Next Page

On this page

UsageExamplesVariantSizeClickable itemsIconAvatarImageGroupHeader