# List · MIAN

Bordered lists of rows with titles, descriptions, avatars and trailing content, or links.

- Id: `list` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/list
- Use for: list of items, members list, settings list, link list, inbox rows.

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-list`: On a <ul>.
- `mn-list-title · mn-list-desc`: Row text.
- `li > a / li > button`: Makes the whole row interactive.

## Accessibility

- Stay with <ul>/<li> so the item count is announced.

## Examples

### People

```html
<ul class="mn-list" style="max-width:28rem">
  <li><span class="mn-avatar"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(330%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(330%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(330%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E"></span><div class="mn-grow"><div class="mn-list-title">Ana Popescu</div><div class="mn-list-desc">ana@mian.ro</div></div><span class="mn-badge mn-badge-soft">Owner</span></li>
  <li><span class="mn-avatar"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(200%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(200%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E"></span><div class="mn-grow"><div class="mn-list-title">Kenji Sato</div><div class="mn-list-desc">kenji@mian.ro</div></div><span class="mn-badge mn-badge-outline mn-neutral">Member</span></li>
  <li><span class="mn-avatar"><img alt="" src="data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2064%2064'%3E%3Crect%20width%3D'64'%20height%3D'64'%20fill%3D'hsl(290%2055%25%2078%25)'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'26'%20r%3D'12'%20fill%3D'hsl(290%2035%25%2042%25)'%2F%3E%3Cpath%20d%3D'M10%2064c2-14%2011-21%2022-21s20%207%2022%2021z'%20fill%3D'hsl(290%2035%25%2042%25)'%2F%3E%3C%2Fsvg%3E"></span><div class="mn-grow"><div class="mn-list-title">Linh Tran</div><div class="mn-list-desc">linh@mian.ro</div></div><span class="mn-badge mn-badge-outline mn-neutral">Member</span></li>
</ul>
```

### Navigation list

```html
<ul class="mn-list" style="max-width:28rem">
  <li><a href="#list"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span class="mn-grow">Account</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></a></li>
  <li><a href="#list"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/></svg><span class="mn-grow">Notifications</span><span class="mn-badge mn-badge-sm">3</span></a></li>
  <li><a href="#list"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg><span class="mn-grow">Privacy</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></a></li>
</ul>
```

## Source

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