# Agenda · MIAN

A schedule of times, sessions, speakers and tracks, for events, courses and programmes.

- Id: `agenda` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/agenda
- Use for: event schedule, conference agenda, timetable, programme, course schedule.
- On a page: schedule · prominence medium · density high.
- Alternatives: timeline, table.
- Avoid: Sessions without times or rooms.

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-agenda`: The list (a <ol>).
- `mn-agenda-item`: A row: mn-agenda-time, mn-agenda-body (mn-agenda-title, mn-agenda-who) and an optional badge. mn-agenda-item-break for breaks.

## Accessibility

- Use <time datetime="…"> for times.
- Use an ordered list: the order is the schedule.

## Examples

### Agenda

```html
<section class="mn-section mn-section-sm"><div class="mn-container"><ol class="mn-agenda">
  <li class="mn-agenda-item"><time class="mn-agenda-time" datetime="09:30">09:30</time><div class="mn-agenda-body"><h3 class="mn-agenda-title">Opening: interfaces are surfaces</h3><p class="mn-agenda-who">Ilinca Sava · Field Notes</p></div><span class="mn-badge mn-badge-outline mn-neutral">Main stage</span></li>
  <li class="mn-agenda-item"><time class="mn-agenda-time" datetime="10:15">10:15</time><div class="mn-agenda-body"><h3 class="mn-agenda-title">Type that survives translation</h3><p class="mn-agenda-who">Jonas Olsen · Kestrel</p></div><span class="mn-badge mn-badge-outline mn-neutral">Studio</span></li>
  <li class="mn-agenda-item mn-agenda-item-break"><time class="mn-agenda-time" datetime="11:00">11:00</time><div class="mn-agenda-body"><h3 class="mn-agenda-title">Coffee and noodles</h3></div></li>
</ol></div></section>
```

## Source

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