Surfaces

Description List

A semantic HTML component for displaying key-value pairs, perfect for structured data like product details or definitions. It can be used with headings and cards.

CardHeading

Basic

A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.

Loading...

Installation

npx shadcn@latest add @intentui/description-list

Anatomy

import { DescriptionDetails, DescriptionList, DescriptionTerm } from "@/components/ui/description-list"
<DescriptionList>
  <DescriptionTerm>Invoice Number</DescriptionTerm>
  <DescriptionDetails>INV-12345</DescriptionDetails>
  <DescriptionTerm>Invoice Date</DescriptionTerm>
  <DescriptionDetails>September 21, 2024</DescriptionDetails>
</DescriptionList>

Manual installation

With heading

This example shows with heading.

Loading...

With card

Sometimes, you may want to use a card to display the description list. This example shows how to do it.

Loading...
Card
Heading