Component

Itinerary

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

Plain-text source, for agents and clipboard use: /components/source/itinerary.txt

When to use it

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.

Not this

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.

Examples

Departure itinerary

Three days. Day 2’s glacier walk awaits its supplier and Day 3’s boat tour is on request, so the open work is visible where it happens rather than in a separate list.

Day 1 Sat 12 Sep
Keflavík → Reykjavik
1. 15:40
  
  Arrival transfer
  
  Private car · Reykjavik Transfers
  Confirmed
2. 19:30
  
  Welcome dinner
  
  Harbour Kitchen · 4 guests
  Confirmed
OvernightHotel Borg, Reykjavik · Superior double
Day 2 Sun 13 Sep
Reykjavik → Vík
1. 08:30
  
  South Coast day tour
  
  Coach 18 · Guide Anna Jónsdóttir
  Confirmed
2. 13:00
  
  Glacier walk
  
  Sólheimajökull · Mountain Guides
  Awaiting supplier
OvernightHotel Kría, Vík · Standard double
Day 3 Mon 14 Sep
Vík → Jökulsárlón
1. 09:00
  
  Glacier lagoon boat tour
  
  Jökulsárlón · Lagoon Boats
  On request
OvernightFosshotel Glacier Lagoon · Room not yet allocated

html

<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>

Anatomy

Part	Description
List	An ol of days, separated by hairlines in border-subtle rather than cards.
When	The day number in bold and the date below it. The column wraps above the day when the content would drop below its minimum width.
Title	An h3 naming the route or the theme of the day, such as Reykjavik → Vík.
Services	A Timeline with the schedule modifier: time, service, supplier and status.
Overnight	Optional: the accommodation and room type, after a hairline.

API

Name	Kind	Description
`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".

States

State	Treatment
Service status	A badge in each service’s aside: confirmed, on request, awaiting supplier or cancelled.
Today	On a departure in progress, aria-current="time" on the running service marks where the day is.
Narrow	The when column wraps above the day. Nothing is hidden or truncated.

Keyboard

Keys	Action
`—`	Not interactive. Links and buttons inside a service take focus in reading order.

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.

Tokens

The tier-3 and tier-2 tokens this component binds to. Change the token, not the component.

--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 and don’t

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.

Don’t

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.