Item

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

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

Usage

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

Examples

Elements

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

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

Variant

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

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

Clickable items

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

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

Group

Wrap items in dui-item-group container to group them together.

<dui-item-group>
    <dui-item variant="ItemVariant.Outline">
        <dui-item-media variant="ItemMediaVariant.Icon">
            <dui-icon name="inbox"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Item 1</dui-item-title>
            <dui-item-description>First item with icon.</dui-item-description>
        </dui-item-content>
    </dui-item>
    <dui-item variant="ItemVariant.Outline">
        <dui-item-media variant="ItemMediaVariant.Icon">
            <dui-icon name="inbox"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Item 2</dui-item-title>
            <dui-item-description>Second item with icon.</dui-item-description>
        </dui-item-content>
    </dui-item>
    <dui-item variant="ItemVariant.Outline">
        <dui-item-media variant="ItemMediaVariant.Icon">
            <dui-icon name="inbox"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Item 3</dui-item-title>
            <dui-item-description>Third item with icon.</dui-item-description>
        </dui-item-content>
    </dui-item>
</dui-item-group>

Separator

Items can be separated with dui-item-separator.

<dui-item-group>
    <dui-item variant="ItemVariant.Outline">
        <dui-item-media variant="ItemMediaVariant.Icon">
            <dui-icon name="inbox"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Inbox</dui-item-title>
            <dui-item-description>View all incoming messages.</dui-item-description>
        </dui-item-content>
    </dui-item>
    <dui-item-separator/>
    <dui-item variant="ItemVariant.Outline">
        <dui-item-media variant="ItemMediaVariant.Icon">
            <dui-icon name="inbox"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Sent</dui-item-title>
            <dui-item-description>View all sent messages.</dui-item-description>
        </dui-item-content>
    </dui-item>
    <dui-item-separator/>
    <dui-item variant="ItemVariant.Outline">
        <dui-item-media variant="ItemMediaVariant.Icon">
            <dui-icon name="inbox"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Drafts</dui-item-title>
            <dui-item-description>View all draft messages.</dui-item-description>
        </dui-item-content>
    </dui-item>
    <dui-item-separator/>
    <dui-item variant="ItemVariant.Outline">
        <dui-item-media variant="ItemMediaVariant.Icon">
            <dui-icon name="inbox"/>
        </dui-item-media>
        <dui-item-content>
            <dui-item-title>Archive</dui-item-title>
            <dui-item-description>View archived messages.</dui-item-description>
        </dui-item-content>
    </dui-item>
</dui-item-group>
<dui-item>
    <dui-item-header>
        <span class="text-sm font-medium">Design System</span>
    </dui-item-header>
    <dui-item-content>
        <dui-item-title>Component Library</dui-item-title>
        <dui-item-description>
            A comprehensive collection of reusable UI components for building
            consistent interfaces.
        </dui-item-description>
    </dui-item-content>
</dui-item>
<dui-item variant="ItemVariant.Outline">
    <dui-item-header>
        <span class="text-sm font-medium">Marketing</span>
    </dui-item-header>
    <dui-item-content>
        <dui-item-title>Campaign Analytics</dui-item-title>
        <dui-item-description>
            Track performance metrics and engagement rates across all marketing
            channels.
        </dui-item-description>
    </dui-item-content>
</dui-item>
<dui-item variant="ItemVariant.Muted">
    <dui-item-header>
        <span class="text-sm font-medium">Engineering</span>
    </dui-item-header>
    <dui-item-content>
        <dui-item-title>API Documentation</dui-item-title>
        <dui-item-description>
            Complete reference guide for all available endpoints and
            authentication methods.
        </dui-item-description>
    </dui-item-content>
</dui-item>
<dui-item>
    <dui-item-content>
        <dui-item-title>Quarterly Report Q4 2024</dui-item-title>
        <dui-item-description>
            Financial overview including revenue, expenses, and growth metrics
            for the fourth quarter.
        </dui-item-description>
    </dui-item-content>
    <dui-item-footer>
        <span class="text-muted-foreground text-sm">
            Last updated 2 hours ago
        </span>
    </dui-item-footer>
</dui-item>
<dui-item variant="ItemVariant.Outline">
    <dui-item-content>
        <dui-item-title>User Research Findings</dui-item-title>
        <dui-item-description>
            Insights from interviews and surveys conducted with 50+ users across
            different demographics.
        </dui-item-description>
    </dui-item-content>
    <dui-item-footer>
        <span class="text-muted-foreground text-sm">
            Created by Sarah Chen
        </span>
    </dui-item-footer>
</dui-item>
<dui-item variant="ItemVariant.Muted">
    <dui-item-content>
        <dui-item-title>Product Roadmap</dui-item-title>
        <dui-item-description>
            Planned features and improvements scheduled for the next three
            months.
        </dui-item-description>
    </dui-item-content>
    <dui-item-footer>
        <span class="text-muted-foreground text-sm">12 comments</span>
    </dui-item-footer>
</dui-item>
<dui-item>
    <dui-item-header>
        <span class="text-sm font-medium">Team Project</span>
    </dui-item-header>
    <dui-item-content>
        <dui-item-title>Website Redesign</dui-item-title>
        <dui-item-description>
            Complete overhaul of the company website with modern design
            principles and improved user experience.
        </dui-item-description>
    </dui-item-content>
    <dui-item-footer>
        <span class="text-muted-foreground text-sm">
            Updated 5 minutes ago
        </span>
    </dui-item-footer>
</dui-item>
<dui-item variant="ItemVariant.Outline">
    <dui-item-header>
        <span class="text-sm font-medium">Client Work</span>
    </dui-item-header>
    <dui-item-content>
        <dui-item-title>Mobile App Development</dui-item-title>
        <dui-item-description>
            Building a cross-platform mobile application for iOS and Android
            with React Native.
        </dui-item-description>
    </dui-item-content>
    <dui-item-footer>
        <span class="text-muted-foreground text-sm">
            Status: In Progress
        </span>
    </dui-item-footer>
</dui-item>
<dui-item variant="ItemVariant.Muted">
    <dui-item-header>
        <span class="text-sm font-medium">Documentation</span>
    </dui-item-header>
    <dui-item-content>
        <dui-item-title>API Integration Guide</dui-item-title>
        <dui-item-description>
            Step-by-step instructions for integrating third-party APIs with
            authentication and error handling.
        </dui-item-description>
    </dui-item-content>
    <dui-item-footer>
        <span class="text-muted-foreground text-sm">
            Category: Technical • 3 attachments
        </span>
    </dui-item-footer>
</dui-item>

Image

<dui-item variant="ItemVariant.Outline">
    <dui-item-media variant="ItemMediaVariant.Image">
        <img src="/gradients/gradient-1.jpg" class="w-[40px] h-[40px] object-cover grayscale" />
    </dui-item-media>
    <dui-item-content>
        <dui-item-title>Project Dashboard</dui-item-title>
        <dui-item-description>
            Overview of project settings and configuration.
        </dui-item-description>
    </dui-item-content>
</dui-item>
<dui-item variant="ItemVariant.Outline">
    <dui-item-media variant="ItemMediaVariant.Image">
        <img src="/gradients/gradient-1.jpg" class="w-[40px] h-[40px] object-cover grayscale" />
    </dui-item-media>
    <dui-item-content>
        <dui-item-title>Document</dui-item-title>
        <dui-item-description>A document with metadata displayed.</dui-item-description>
    </dui-item-content>
    <dui-item-actions>
        <dui-button variant="ButtonVariant.Outline" size="ButtonSize.Small">
            View
        </dui-button>
    </dui-item-actions>
</dui-item>
<dui-item variant="ItemVariant.Outline">
    <dui-item-media variant="ItemMediaVariant.Image">
        <img src="/gradients/gradient-1.jpg" class="w-[40px] h-[40px] object-cover grayscale" />
    </dui-item-media>
    <dui-item-content>
        <dui-item-title>File Attachment</dui-item-title>
        <dui-item-description>
            Complete file with image, title, description, and action button.
        </dui-item-description>
    </dui-item-content>
    <dui-item-actions>
        <dui-button size="ButtonSize.Small">Download</dui-button>
    </dui-item-actions>
</dui-item>

Icon

Previous Page

Kbd

Next Page

On this page

UsageExamplesElementsVariantSizeClickable itemsGroupSeparatorHeaderFooterHeader and FooterImage