# Flux 2.0 — Itinerary

A trip, day by day: where each day goes, what runs when, and where everyone sleeps.

Reference: https://flux.kaptio.com/components/itinerary/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
Lays out a booking or a departure as days. Each day has its number and date, a title naming the route, a schedule of services with their supplier and status, and the overnight. It is the view an operator checks before confirming a booking and the view a guide reads before a departure, so status sits next to every service that can fail.

## Do not use it when
Not for a list of departures or bookings; that is a Table. Not for a single day’s schedule on its own; that is a Timeline with the schedule modifier. Not for a customer-facing brochure, where photography and copy lead and operational status does not belong.

## Markup

### Departure itinerary

<ol class="flux-itinerary">
  <li class="flux-itinerary__day" aria-labelledby="day-1-title">
    <div class="flux-itinerary__when">
      <span class="flux-itinerary__number">Day 1</span>
      <time class="flux-itinerary__date" datetime="2026-09-12">Sat 12 Sep</time>
    </div>
    <div class="flux-itinerary__body">
      <h3 class="flux-itinerary__title" id="day-1-title">Keflavík &rarr; Reykjavik</h3>
      <ol class="flux-timeline flux-timeline--schedule" aria-label="Day 1 services">
        <li class="flux-timeline__item">
          <time class="flux-timeline__time" datetime="2026-09-12T15:40">15:40</time>
          <span class="flux-timeline__marker" aria-hidden="true"></span>
          <div class="flux-timeline__content">
            <p class="flux-timeline__title">Arrival transfer</p>
            <p class="flux-timeline__body">Private car · Reykjavik Transfers</p>
            <span class="flux-timeline__aside"><span class="flux-badge flux-badge--confirmed">Confirmed</span></span>
          </div>
        </li>
        <li class="flux-timeline__item">
          <time class="flux-timeline__time" datetime="2026-09-12T19:30">19:30</time>
          <span class="flux-timeline__marker" aria-hidden="true"></span>
          <div class="flux-timeline__content">
            <p class="flux-timeline__title">Welcome dinner</p>
            <p class="flux-timeline__body">Harbour Kitchen · 4 guests</p>
            <span class="flux-timeline__aside"><span class="flux-badge flux-badge--confirmed">Confirmed</span></span>
          </div>
        </li>
      </ol>
      <p class="flux-itinerary__overnight"><span class="flux-itinerary__overnight-label">Overnight</span>Hotel Borg, Reykjavik · Superior double</p>
    </div>
  </li>
  <li class="flux-itinerary__day" aria-labelledby="day-2-title">
    <div class="flux-itinerary__when">
      <span class="flux-itinerary__number">Day 2</span>
      <time class="flux-itinerary__date" datetime="2026-09-13">Sun 13 Sep</time>
    </div>
    <div class="flux-itinerary__body">
      <h3 class="flux-itinerary__title" id="day-2-title">Reykjavik &rarr; Vík</h3>
      <ol class="flux-timeline flux-timeline--schedule" aria-label="Day 2 services">
        <li class="flux-timeline__item">
          <time class="flux-timeline__time" datetime="2026-09-13T08:30">08:30</time>
          <span class="flux-timeline__marker" aria-hidden="true"></span>
          <div class="flux-timeline__content">
            <p class="flux-timeline__title">South Coast day tour</p>
            <p class="flux-timeline__body">Coach 18 · Guide Anna Jónsdóttir</p>
            <span class="flux-timeline__aside"><span class="flux-badge flux-badge--confirmed">Confirmed</span></span>
          </div>
        </li>
        <li class="flux-timeline__item">
          <time class="flux-timeline__time" datetime="2026-09-13T13:00">13:00</time>
          <span class="flux-timeline__marker" aria-hidden="true"></span>
          <div class="flux-timeline__content">
            <p class="flux-timeline__title">Glacier walk</p>
            <p class="flux-timeline__body">Sólheimajökull · Mountain Guides</p>
            <span class="flux-timeline__aside"><span class="flux-badge flux-badge--awaiting">Awaiting supplier</span></span>
          </div>
        </li>
      </ol>
      <p class="flux-itinerary__overnight"><span class="flux-itinerary__overnight-label">Overnight</span>Hotel Kría, Vík · Standard double</p>
    </div>
  </li>
  <li class="flux-itinerary__day" aria-labelledby="day-3-title">
    <div class="flux-itinerary__when">
      <span class="flux-itinerary__number">Day 3</span>
      <time class="flux-itinerary__date" datetime="2026-09-14">Mon 14 Sep</time>
    </div>
    <div class="flux-itinerary__body">
      <h3 class="flux-itinerary__title" id="day-3-title">Vík &rarr; Jökulsárlón</h3>
      <ol class="flux-timeline flux-timeline--schedule" aria-label="Day 3 services">
        <li class="flux-timeline__item">
          <time class="flux-timeline__time" datetime="2026-09-14T09:00">09:00</time>
          <span class="flux-timeline__marker" aria-hidden="true"></span>
          <div class="flux-timeline__content">
            <p class="flux-timeline__title">Glacier lagoon boat tour</p>
            <p class="flux-timeline__body">Jökulsárlón · Lagoon Boats</p>
            <span class="flux-timeline__aside"><span class="flux-badge flux-badge--pending">On request</span></span>
          </div>
        </li>
      </ol>
      <p class="flux-itinerary__overnight"><span class="flux-itinerary__overnight-label">Overnight</span>Fosshotel Glacier Lagoon · Room not yet allocated</p>
    </div>
  </li>
</ol>

## API
- flux-itinerary (class): The ol of days.
- flux-itinerary__day (class): One li, labelled by its title with aria-labelledby.
- flux-itinerary__when (class): Holds the number and the date. --flux-itinerary-when-width wide.
- flux-itinerary__number (class): The day number, as "Day 1". Numbering is correct here: the order of days is the meaning.
- flux-itinerary__date (class): A time element with a datetime attribute.
- flux-itinerary__body (class): Holds the title, the services and the overnight. Never narrower than --flux-itinerary-body-min-width.
- flux-itinerary__title (class): The h3. Choose the level for the page outline; the size comes from the token.
- flux-itinerary__overnight (class): Optional p with the accommodation.
- flux-itinerary__overnight-label (class): The span reading "Overnight".

## Accessibility
- Use an ol for the days, and label each day with its title so it is announced as "Reykjavik → Vík" rather than as list item 2.
- Give each service timeline an aria-label naming its day.
- Write status in the badge text, never only in its colour.

## Keyboard
- —: Not interactive. Links and buttons inside a service take focus in reading order.

## Tokens
- --flux-itinerary-when-width | -body-min-width
- --flux-itinerary-day-padding | -column-gap | -divider
- --flux-itinerary-number-color | -date-color | -title-size
- All --flux-timeline-* tokens, for the services.

## Do
- Show every service’s status, so an operator can see what is still open without opening each one.
- Name the supplier on the service line. It is the first thing someone chasing a confirmation needs.
- Keep the overnight on every day that has one, including the last night before departure.

## Do not
- Do not put each day in a card. Hairlines separate days; cards would compete with the badges.
- Do not hide services behind an expander by default. Collapse past days only on a long departure in progress.
- Do not colour the day by its worst status. The badges already say it, where it applies.