# Description list · MIAN

Key–value pairs for detail views and summaries.

- Id: `description-list` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/description-list
- Use for: key value pairs, specs, order details, fact box, properties.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-dl`: On a <dl>. Stacks on narrow screens.

## Accessibility

- A real <dl> announces each term with its value.

## Examples

### Details

```html
<dl class="mn-dl" style="max-width:32rem">
  <dt>Full name</dt><dd>Ana Popescu</dd>
  <dt>Role</dt><dd>Product designer</dd>
  <dt>Email</dt><dd>ana@mian.ro</dd>
  <dt>Plan</dt><dd><span class="mn-badge mn-badge-soft">Pro</span></dd>
</dl>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/description-list/source