Description List
ProA structured list of term-description pairs for displaying metadata, definitions, and key-value information. Uses the native <dl>, <dt>, and <dd> elements for proper semantics. Ideal for profile details, product specs, and settings summaries.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Horizontal | Side-by-side layout with terms on the left and descriptions on the right. | Use for wide layouts like settings pages and property panels. |
| Vertical |
Usage Guidelines
Do
Use the native <dl>, <dt>, <dd> elements for semantic structure.
Don't
Use description lists for navigation — use a nav list pattern.
Do
Keep terms concise — one to three words.
Don't
Mix stacked and horizontal layouts in the same list.
Do
Align descriptions consistently within the list.
Don't
Place interactive elements within <dt> terms.
Code
Design Tokens
Accessibility
- Use native <dl>, <dt>, <dd> elements — screen readers announce term-description pairs.
- Group each term-description pair in a <div> for styling without breaking semantics.
- Do not use <dl> for layout purposes — it has specific semantic meaning.