Surfaces

Description List

A semantic HTML component for displaying key-value pairs, perfect for structured data like product details or definitions.

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.

Invoice Number
INV-12345
Invoice Date
September 21, 2024
Due Date
October 21, 2024
Customer Name
John Doe
Total Amount
$1,250.00
Status
Pending

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Anatomy

Manual Installation

With Heading

This example shows with heading.

Product Details

Product Name
Wireless Headphones
Battery Life
20 hours
Weight
250 grams
Color
Black
Warranty
2 years

With Card

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

Product Details

The product details card is a great way to display information about a product.
Product Name
Wireless Headphones
Battery Life
20 hours
Weight
250 grams
Color
Black
Warranty
2 years
Edit
Previous
Card
Next
Grid