# Price list · MIAN

A menu-style list of items with dotted leaders to the price, for restaurants, salons, studios and services.

- Id: `price-list` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/price-list
- Use for: restaurant menu, service prices, salon price list, menu with prices, rates.
- On a page: decision · prominence medium · density medium.
- Alternatives: pricing, table.
- Avoid: Menus as images or PDFs.

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-pricelist`: The list (a <ul>).
- `mn-pricelist-item`: One item: name, price and description.
- `mn-pricelist-name`: The name (<h3>), followed by a dotted leader.
- `mn-pricelist-price`: The price, in tabular figures.
- `mn-pricelist-desc`: A description under the name; badges for diet or spice.

## Accessibility

- Leaders are CSS only, so screen readers hear “Dan dan mian, €14”, not rows of dots.
- Write allergens and diets as words (e.g. “Vegan”), not just symbols.

## Examples

### Menu

```html
<ul class="mn-pricelist" style="max-width:34rem">
  <li class="mn-pricelist-item"><h3 class="mn-pricelist-name">Beef lamian</h3><span class="mn-pricelist-price">€16</span><p class="mn-pricelist-desc">Hand-pulled noodles, 18-hour beef broth, radish, chilli oil.</p></li>
  <li class="mn-pricelist-item"><h3 class="mn-pricelist-name">Dan dan mian</h3><span class="mn-pricelist-price">€14</span><p class="mn-pricelist-desc">Sesame, Sichuan pepper, pickled mustard greens. <span class="mn-badge mn-badge-soft mn-danger mn-badge-sm">Spicy</span></p></li>
  <li class="mn-pricelist-item"><h3 class="mn-pricelist-name">Cold sesame soba</h3><span class="mn-pricelist-price">€13</span><p class="mn-pricelist-desc">Buckwheat noodles, cucumber, toasted sesame. <span class="mn-badge mn-badge-soft mn-success mn-badge-sm">Vegan</span></p></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/price-list/source