# Slides · MIAN

A presentation website: full-height slides that snap, with arrow-key navigation, a counter and progress.

- Id: `slides` · Category: Sections · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/slides
- Use for: presentation website, pitch deck, keynote, slides, investor deck, one idea per screen.
- On a page: frame · prominence high · density low.
- Alternatives: article.
- Avoid: Paragraphs on slides; decks that only work with a clicker.

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">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-deck`: The wrapper for the slides, the bar and the progress line.
- `mn-slides`: The scrolling deck (focusable, with an aria-label). --h sets its height (default 100dvh).
- `mn-slide`: A slide; mn-slide-center centres it.
- `mn-deck-bar`: Counter ([data-mn-slide-count]) and prev/next buttons (data-mn-slide="prev|next").
- `mn-deck-progress`: A thin progress line at the top.

## Accessibility

- The deck is focusable with an aria-label; arrow keys, Page Up/Down, Space, Home and End move between slides.
- Each slide gets aria-roledescription="slide" and a “3 of 8” label; the counter is visible text.
- Scroll snapping stays usable with a mouse wheel, touch and assistive tech: nothing is hidden.

## Examples

### Deck

```html
<div class="mn-deck" style="border:1px solid var(--mn-border);border-radius:var(--mn-radius-box);overflow:hidden">
  <div class="mn-deck-progress"></div>
  <div class="mn-slides" tabindex="0" aria-label="Ledger, Series A" style="--h:22rem">
    <section class="mn-slide mn-slide-center"><p class="mn-eyebrow">Series A · 2026</p><h3 class="mn-title">Close the books in four days.</h3><p class="mn-intro">Ledger, for finance teams of 5 to 500.</p></section>
    <section class="mn-slide"><p class="mn-eyebrow">The problem</p><h3 class="mn-title">Month-end takes 14 days. 10 of them are data entry.</h3></section>
    <section class="mn-slide"><dl class="mn-figures" style="--cols:3"><div><dt>Customers</dt><dd>1,400</dd></div><div><dt>ARR</dt><dd>€8.2 M</dd></div><div><dt>Net retention</dt><dd>131%</dd></div></dl></section>
  </div>
  <div class="mn-deck-bar"><span data-mn-slide-count>1 / 3</span><button class="mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm" type="button" data-mn-slide="prev" aria-label="Previous slide"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg></button><button class="mn-btn mn-btn-ghost mn-btn-icon mn-btn-sm" type="button" data-mn-slide="next" aria-label="Next slide"><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></button></div>
</div>
```

## Source

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