refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/places. Install with npm install @refrakt-md/places and add "@refrakt-md/places" to the packages array in your refrakt.config.json.

Itinerary

Day-by-day travel itineraries. H2 headings become days, and H3 headings with a "time — location" pattern are parsed into timed stops. Content below each stop becomes the stop description.

Basic usage

Use H2 headings for days and "time — location" headings for individual stops.

{% itinerary variant="day-by-day" %}
## Day 1 — Arrival

### 9:00 AM — Narita Airport

Clear customs and pick up your Japan Rail Pass at the JR counter.

### 12:00 PM — Shinjuku

Check in to the hotel and grab lunch at a nearby ramen shop.

### 6:00 PM — Shibuya

Explore the famous crossing and have dinner in the area.

## Day 2 — Temples & Gardens

### 8:00 AM — Meiji Shrine

Start the day with a peaceful walk through the shrine grounds.

### 11:00 AM — Harajuku

Browse Takeshita Street and the backstreet boutiques.
{% /itinerary %}
<section data-field="content-section" data-rune="itinerary" typeof="ItemList">
  <meta content="day-by-day" data-field="variant">
  <meta content="vertical" data-field="direction">
  <div data-name="days">
    <article data-field="day" data-rune="itinerary-day">
      <h3 data-field="label">Day 1 — Arrival</h3>
      <meta content="" data-field="date">
      <ol data-name="stops">
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">9:00 AM</time>
          <span data-field="location">Narita Airport</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Clear customs and pick up your Japan Rail Pass at the JR counter.</p>
          </div>
        </li>
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">12:00 PM</time>
          <span data-field="location">Shinjuku</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Check in to the hotel and grab lunch at a nearby ramen shop.</p>
          </div>
        </li>
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">6:00 PM</time>
          <span data-field="location">Shibuya</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Explore the famous crossing and have dinner in the area.</p>
          </div>
        </li>
      </ol>
    </article>
    <article data-field="day" data-rune="itinerary-day">
      <h3 data-field="label">Day 2 — Temples &amp; Gardens</h3>
      <meta content="" data-field="date">
      <ol data-name="stops">
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">8:00 AM</time>
          <span data-field="location">Meiji Shrine</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Start the day with a peaceful walk through the shrine grounds.</p>
          </div>
        </li>
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">11:00 AM</time>
          <span data-field="location">Harajuku</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Browse Takeshita Street and the backstreet boutiques.</p>
          </div>
        </li>
      </ol>
    </article>
  </div>
</section>

Day 1 — Arrival

  1. Narita Airport

    Clear customs and pick up your Japan Rail Pass at the JR counter.

  2. Shinjuku

    Check in to the hotel and grab lunch at a nearby ramen shop.

  3. Shibuya

    Explore the famous crossing and have dinner in the area.

Day 2 — Temples & Gardens

  1. Meiji Shrine

    Start the day with a peaceful walk through the shrine grounds.

  2. Harajuku

    Browse Takeshita Street and the backstreet boutiques.

<section data-field="content-section" typeof="ItemList" class="rf-itinerary rf-itinerary--day-by-day rf-itinerary--vertical" data-variant="day-by-day" data-direction="vertical" data-rune="itinerary" data-density="full">
  <div data-name="days" class="rf-itinerary__days">
    <article data-field="day" class="rf-itinerary-day" data-rune="itinerary-day" data-density="full">
      <h3 data-field="label" data-name="header" class="rf-itinerary-day__header">Day 1 — Arrival</h3>
      <meta content="" data-field="date" />
      <ol data-name="stops" class="rf-itinerary-day__stops" data-sequence="connected">
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">9:00 AM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Narita Airport</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Clear customs and pick up your Japan Rail Pass at the JR counter.</p>
          </div>
        </li>
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">12:00 PM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Shinjuku</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Check in to the hotel and grab lunch at a nearby ramen shop.</p>
          </div>
        </li>
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">6:00 PM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Shibuya</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Explore the famous crossing and have dinner in the area.</p>
          </div>
        </li>
      </ol>
    </article>
    <article data-field="day" class="rf-itinerary-day" data-rune="itinerary-day" data-density="full">
      <h3 data-field="label" data-name="header" class="rf-itinerary-day__header">Day 2 — Temples &amp; Gardens</h3>
      <meta content="" data-field="date" />
      <ol data-name="stops" class="rf-itinerary-day__stops" data-sequence="connected">
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">8:00 AM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Meiji Shrine</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Start the day with a peaceful walk through the shrine grounds.</p>
          </div>
        </li>
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">11:00 AM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Harajuku</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Browse Takeshita Street and the backstreet boutiques.</p>
          </div>
        </li>
      </ol>
    </article>
  </div>
</section>

Single-day itinerary

Without H2 headings, all stops are grouped into a single implicit day.

{% itinerary %}
### 10:00 AM — Museum of Modern Art

Spend the morning exploring the permanent collection.

### 1:00 PM — Central Park

Picnic lunch on the Great Lawn.

### 3:00 PM — Times Square

Walk through the theater district.
{% /itinerary %}
<section data-field="content-section" data-rune="itinerary" typeof="ItemList">
  <meta content="day-by-day" data-field="variant">
  <meta content="vertical" data-field="direction">
  <div data-name="days">
    <article data-field="day" data-rune="itinerary-day">
      <h3 data-field="label"></h3>
      <meta content="" data-field="date">
      <ol data-name="stops">
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">10:00 AM</time>
          <span data-field="location">Museum of Modern Art</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Spend the morning exploring the permanent collection.</p>
          </div>
        </li>
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">1:00 PM</time>
          <span data-field="location">Central Park</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Picnic lunch on the Great Lawn.</p>
          </div>
        </li>
        <li data-field="stop" data-rune="itinerary-stop">
          <time data-field="time">3:00 PM</time>
          <span data-field="location">Times Square</span>
          <meta content="" data-field="duration">
          <meta content="" data-field="activity">
          <meta content="" data-field="lat">
          <meta content="" data-field="lng">
          <div data-name="body">
            <p>Walk through the theater district.</p>
          </div>
        </li>
      </ol>
    </article>
  </div>
</section>

  1. Museum of Modern Art

    Spend the morning exploring the permanent collection.

  2. Central Park

    Picnic lunch on the Great Lawn.

  3. Times Square

    Walk through the theater district.

<section data-field="content-section" typeof="ItemList" class="rf-itinerary rf-itinerary--day-by-day rf-itinerary--vertical" data-variant="day-by-day" data-direction="vertical" data-rune="itinerary" data-density="full">
  <div data-name="days" class="rf-itinerary__days">
    <article data-field="day" class="rf-itinerary-day" data-rune="itinerary-day" data-density="full">
      <h3 data-field="label" data-name="header" class="rf-itinerary-day__header"></h3>
      <meta content="" data-field="date" />
      <ol data-name="stops" class="rf-itinerary-day__stops" data-sequence="connected">
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">10:00 AM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Museum of Modern Art</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Spend the morning exploring the permanent collection.</p>
          </div>
        </li>
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">1:00 PM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Central Park</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Picnic lunch on the Great Lawn.</p>
          </div>
        </li>
        <li data-field="stop" class="rf-itinerary-stop" data-rune="itinerary-stop" data-density="full">
          <time data-field="time" data-name="time" class="rf-itinerary-stop__time">3:00 PM</time>
          <span data-field="location" data-name="location" class="rf-itinerary-stop__location">Times Square</span>
          <meta content="" data-field="lat" />
          <meta content="" data-field="lng" />
          <div data-name="body" class="rf-itinerary-stop__body">
            <p>Walk through the theater district.</p>
          </div>
        </li>
      </ol>
    </article>
  </div>
</section>

Attributes

AttributeTypeDefaultDescription
variantstringday-by-dayDisplay variant
directionstringverticalLayout direction

Day attributes

AttributeTypeDefaultDescription
labelstring—Day label (parsed from H2 heading)
datestring—Date information

Stop attributes

AttributeTypeDefaultDescription
timestring—Time of the stop (parsed from heading text before —)
locationstring—Location name (parsed from heading text after —)
durationstring—How long spent at this location
activitystring—Activity name
latstring—Latitude coordinate
lngstring—Longitude coordinate

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration

Section header

Itinerary supports an optional eyebrow, headline, and blurb above the section above itinerary stops. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.