# Curriculum · MIAN

Modules and lessons of a course with durations, lesson type, done and locked states, each module a native disclosure.

- Id: `curriculum` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/curriculum
- Use for: course curriculum, syllabus, lesson list, course modules, training outline.

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-curriculum`: The list of modules.
- `mn-module`: A module: <details> with a summary (title, lesson count, duration).
- `mn-module-meta`: The count and duration in the summary.
- `mn-lessons`: The ordered list of lessons.
- `mn-lesson`: A lesson row. data-state="done" or "locked".
- `mn-lesson-time`: Duration, in tabular figures.

## Accessibility

- Modules are native <details>, so they open with Enter or Space and announce expanded or collapsed.
- Done and locked states are also written as text (visually hidden), not only drawn.
- Durations use <time datetime="PT12M"> so they are machine-readable.

## Examples

### Course outline

```html
<div class="mn-curriculum">
  <details class="mn-module" open><summary><span>1 · Seeing type</span><span class="mn-module-meta">4 lessons · 48 min</span></summary>
    <ol class="mn-lessons">
      <li class="mn-lesson" data-state="done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span>How letters are built<span class="mn-sr-only"> (done)</span></span><time class="mn-lesson-time" datetime="PT12M">12:00</time></li>
      <li class="mn-lesson" data-state="done"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg><span>Serif, sans and everything between<span class="mn-sr-only"> (done)</span></span><time class="mn-lesson-time" datetime="PT14M">14:00</time></li>
      <li class="mn-lesson"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 4.5v15l12-7.5Z"/></svg><span>Measure, leading and rhythm</span><time class="mn-lesson-time" datetime="PT11M">11:00</time></li>
      <li class="mn-lesson"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z"/><path d="M14 3v5h5"/></svg><span>Exercise: set a menu</span><time class="mn-lesson-time" datetime="PT11M">11:00</time></li>
    </ol></details>
  <details class="mn-module"><summary><span>2 · Pairing and hierarchy</span><span class="mn-module-meta">5 lessons · 62 min</span></summary>
    <ol class="mn-lessons">
      <li class="mn-lesson" data-state="locked"><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>Two faces, one voice<span class="mn-sr-only"> (locked)</span></span><time class="mn-lesson-time" datetime="PT13M">13:00</time></li>
      <li class="mn-lesson" data-state="locked"><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>Scales that hold<span class="mn-sr-only"> (locked)</span></span><time class="mn-lesson-time" datetime="PT12M">12:00</time></li>
    </ol></details>
</div>
```

## Source

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