Font tokens

These are the typography variables defined in the theme @theme block.

--font-heading is used for headings, --font-body is used for body copy, and --font-cursive is used sparingly for decorative accent text.

Live render

Heading scale

Fraunces is the heading face across the theme. These examples show the current heading hierarchy used on the site.

Rendered examples below include the font size and weight so you can match them intentionally in templates and custom sections.

Live render

Body sizes

Inter is the body face across the theme. These are the most common body sizes used in templates and content surfaces.

Use base for standard reading text, small for support copy and metadata, and large for intro paragraphs or key explanatory copy.

Live render

.legal-tldr

Creates a structured summary box that surfaces the main legal takeaways before the full document begins.

Use in an HTML block in Ghost Admin.

<div class="legal-tldr">
  <ul>
    <li>First key takeaway</li>
    <li>Second key takeaway</li>
    <li>Third key takeaway</li>
  </ul>
</div>

Live render

.al-faq

Creates a click-to-open FAQ card for short question-and-answer pairs inside post content.

Use one HTML block per FAQ item in Ghost Admin. Write the question in the <h3> and the answer in the following <p>.

Advice: keep the answer to one paragraph per card. If an answer needs multiple sections, lists, or images, it should probably be a normal content section instead of an accordion.

Automatic schema: every .al-faq on the page contributes one question to an automatically injected FAQPage JSON-LD block.

<div class="al-faq">
  <h3>Do we need to book tickets in advance?</h3>
  <p>For the busiest attractions, yes. We usually book the day and time first, then build the rest of the day around that anchor.</p>
</div>

Live render

.al-coupon

Creates a coupon card with a copyable discount code and an optional full-width CTA button.

Use one HTML block in Ghost Admin. Put the product or partner name in the <h3>, the offer copy in the <p>, and wrap the coupon code itself in <strong>.

Advice: keep the offer sentence short and only use one <strong> code per coupon card. The link is optional, but if you include one it should be the main action you want readers to take. Readers can click the code itself to copy it.

<div class="al-coupon">
  <h3>Holafly eSIM</h3>
  <p>Use code <strong>ADAMANDLINDS</strong> for 5% off your eSIM.</p>
  <a href="https://holafly.com">Get your eSIM</a>
</div>

Live render

.al-cta

Creates a promotional callout card with a prominent heading, optional supporting text, and one or more stacked full-width CTA buttons.

Use one HTML block in Ghost Admin. Start with the <h3>, then add an optional <p>, then one or more <a> links. The first link renders as the primary coral button. If you add a second link, it renders as the secondary outline button.

Advice: keep the heading direct and action-oriented. This works best when the reader already has enough context and just needs a clear next step.

<div class="al-cta">
  <h3>Ready to book USJ?</h3>
  <p>Use code ADAMANDLINDSKLOOK at checkout for extra savings.</p>
  <a href="https://klook.com">Book on Klook</a>
  <a href="https://klook.com">Read our Klook guide</a>
</div>

Live render

.al-howto

Creates a step-by-step how-to card with auto-numbered steps, an optional image per step, and an optional primary CTA button at the bottom.

Use one HTML block in Ghost Admin. Put the section <h2> outside the component, then add one <li> per step inside the <ol>. Each step requires an <h3>. The image and paragraph are optional.

Advice: keep each step focused on one action. If you use images, use screenshots or booking flow images that genuinely help the reader move through the task.

Automatic schema: add data-schema-name="..." to the .al-howto wrapper to automatically inject HowTo JSON-LD into the page head.

<h2>How to Buy a JR Pass on Klook</h2>
<div class="al-howto" data-schema-name="How to Buy a JR Pass on Klook">
  <ol>
    <li>
      <img src="https://images.unsplash.com/photo-1517760444937-f6397edcbbcd?auto=format&fit=crop&w=400&q=80" alt="Laptop open on a booking website">
      <h3>Go to the Klook website</h3>
      <p>Search for JR Pass or use our direct link below.</p>
    </li>
    <li>
      <h3>Select your pass duration</h3>
      <p>Choose 7, 14, or 21 days depending on your itinerary.</p>
    </li>
  </ol>
  <a href="https://www.klook.com/">Buy JR Pass on Klook</a>
</div>

Live render

.al-itinerary

Creates a visual itinerary card for day-by-day or time-based plans, with an optional header block, optional images, and a timeline-style marker for each stop.

Use one HTML block in Ghost Admin. Add an optional .al-itinerary-header first. For each stop, use one direct child <div>. If you want a day-based marker, put two <p> labels before the <h3>. If you want a time-based marker, use one <p> label before the <h3>.

Advice: keep each stop tight. This works best for 3 to 6 entries, each with a short title and one supporting sentence.

Automatic schema: add data-schema-name="..." to the .al-itinerary wrapper to automatically inject ItemList JSON-LD into the page head.

<div class="al-itinerary" data-schema-name="10 Days in Japan">
  <div class="al-itinerary-header">
    <p>Our Itinerary</p>
    <h2>10 Days in Japan</h2>
    <p>A perfect first trip that hits the highlights without feeling rushed.</p>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?auto=format&fit=crop&w=800&q=80" alt="Tokyo at dusk">
    <p>Day</p>
    <p>1-3</p>
    <h3>Tokyo</h3>
    <p>Temples, neighborhoods, incredible food, and getting our bearings in Japan.</p>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=800&q=80" alt="Kyoto street at sunset">
    <p>Day</p>
    <p>5-7</p>
    <h3>Kyoto</h3>
    <p>Shrines, bamboo forests, and the most beautiful streets.</p>
  </div>
</div>

Live render · Day-based

Our Itinerary

10 Days in Japan

A perfect first trip that hits the highlights without feeling rushed.

Day

1-3

Tokyo

Temples, neighborhoods, incredible food, and getting our bearings in Japan.

Day

5-7

Kyoto

Shrines, bamboo forests, and the most beautiful streets.

<div class="al-itinerary" data-schema-name="Walking Tour in Taipei">
  <div class="al-itinerary-header">
    <p>Our Itinerary</p>
    <h2>Walking Tour in Taipei</h2>
  </div>
  <div>
    <p>8:00 AM</p>
    <h3>Meet at the Metro Station</h3>
    <p>We start at Exit 3, north side.</p>
  </div>
  <div>
    <p>9:00 AM</p>
    <h3>Explore Dadaocheng</h3>
    <p>Historic warehouses, tea shops, and the best scallion pancakes.</p>
  </div>
</div>

Live render · Time-based

.al-features

Creates a feature list card with optional intro copy, icon-led list items, an optional muted footnote, and stacked primary/secondary CTA buttons.

Use one HTML block in Ghost Admin. The <ul> is required. Add data-icon on each <li> to choose any Lucide icon name that exists in the theme's Lucide bundle. If you leave it off, or use a name that doesn't exist, the list item falls back to check.

Advice: keep each feature line short and scannable. Use .al-footnote only for small disclaimers or caveats that should sit below the list, not as a second body paragraph.

<div class="al-features">
  <h3>Why We Love Holafly</h3>
  <p>Optional supporting text.</p>
  <ul>
    <li data-icon="check">Unlimited data in 170+ countries</li>
    <li data-icon="plane">No physical SIM needed</li>
    <li data-icon="zap">Works the moment you land</li>
  </ul>
  <p class="al-footnote">* Unlimited subject to fair use policy.</p>
  <a href="#">Get your eSIM</a>
  <a href="#">Read our review</a>
</div>

Live render

.al-tip

Creates a soft sage tip callout with an automatically injected lightbulb icon.

Use one HTML block in Ghost Admin with a single wrapper and paragraph.

<div class="al-tip">
  <p>Pro tip: arrive at USJ right when the gates open.</p>
</div>

Live render

.al-warning

Creates a coral warning callout with an automatically injected triangle-alert icon.

Use one HTML block in Ghost Admin with a single wrapper and paragraph.

<div class="al-warning">
  <p>Warning: Express Pass sells out on peak days. Book in advance.</p>
</div>

Live render

.al-info

Creates a mist-blue info callout with an automatically injected info icon.

Use one HTML block in Ghost Admin with a single wrapper and paragraph.

<div class="al-info">
  <p>Note: The JR Pass does not cover the Yumesaki Line to USJ.</p>
</div>

Live render

.al-related

Creates a muted related-reading card with optional intro copy and one or more equal-weight reading-list links.

Use one HTML block in Ghost Admin. The links are required. Add an optional <h3> and optional supporting <p> above them if needed.

Advice: use this for supporting articles that help the reader go deeper, not for affiliate actions or primary booking prompts.

<div class="al-related">
  <h3>Related Reading</h3>
  <p>Optional supporting text.</p>
  <a href="/japan-rail-pass/">Is the JR Pass Worth It?</a>
  <a href="/tokyo-with-kids/">Tokyo With Kids: Full Guide</a>
  <a href="/holafly-japan/">Best eSIM for Japan</a>
</div>

Live render

.al-video

Creates a responsive 16:9 video wrapper for YouTube and other iframe embeds inside post content.

Use one HTML block in Ghost Admin. Wrap a single <iframe> in .al-video and use the provider's embed URL, not the regular watch-page URL.

Advice: for YouTube, use https://www.youtube.com/embed/VIDEO_ID. Some videos disable embedding, so if you see "refused to connect," test a different video or confirm embedding is allowed on YouTube.

<div class="al-video">
  <iframe src="https://www.youtube.com/embed/jNQXAC9IVRw" title="Me at the zoo" frameborder="0" allowfullscreen></iframe>
</div>

Live render

.al-disclosure

Creates a small, muted disclosure footnote for affiliate or sponsorship boilerplate.

Use one HTML block in Ghost Admin with a single wrapper and paragraph. The script will automatically append a link to the full affiliate disclosure page.

Advice: keep this short and factual. It should read like legal context, not promotional copy.

<div class="al-disclosure">
  <p>This post contains affiliate links. If you book through our links we may earn a small commission at no extra cost to you.</p>
</div>

Live render

.al-compare

Creates a responsive comparison grid for plan, ticket, or product cards, with optional featured emphasis on one option.

Use one HTML block in Ghost Admin. Add one inner <div> per card. To highlight one option, add class="al-featured" and an optional data-badge value. If you omit data-badge, the badge defaults to Most Popular.

Advice: keep the first paragraph short because it becomes the eyebrow label. Use the second paragraph for the key differentiator and the third for a short explanation.

<div class="al-compare">
  <div>
    <p>Light Plan</p>
    <h3>$49.90<span>/month</span></h3>
    <p>25GB across 160+ countries</p>
    <p>One eSIM, one monthly fee, no surprises.</p>
  </div>
  <div class="al-featured" data-badge="Most Popular">
    <p>Unlimited Plan</p>
    <h3>$64.90<span>/month</span></h3>
    <p>Unlimited data, 160+ countries</p>
    <p>What we actually use. Hotspot included.</p>
  </div>
  <div>
    <p>Regional Plan</p>
    <h3>$29.90<span>/month</span></h3>
    <p>10GB across 30+ countries</p>
    <p>Good for shorter trips.</p>
  </div>
</div>

Live render

.al-table-default

Creates a clean fully bordered table with an ink header row for general travel reference content.

Add the class directly to the <table>. The script automatically wraps it for horizontal scrolling on smaller screens, so authors should not add their own overflow wrapper.

<table class="al-table-default">
  <thead>
    <tr>
      <th>City</th>
      <th>Best For</th>
      <th>Typical Stay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tokyo</td>
      <td>First trip to Japan</td>
      <td>5 nights</td>
    </tr>
    <tr>
      <td>Kyoto</td>
      <td>Temples and slower days</td>
      <td>3 nights</td>
    </tr>
    <tr>
      <td>Osaka</td>
      <td>Food and family attractions</td>
      <td>3 nights</td>
    </tr>
  </tbody>
</table>

Live render

.al-table-coral

Creates a fully bordered table with a coral header row for stronger emphasis.

Use this when the table supports a conversion-oriented section and can carry a little more visual weight than the default table.

<table class="al-table-coral">
  <thead>
    <tr>
      <th>Pass</th>
      <th>Who It Fits</th>
      <th>Starting Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>USJ 1-Day Studio Pass</td>
      <td>Single park day</td>
      <td>From ¥8,600</td>
    </tr>
    <tr>
      <td>Express Pass 4</td>
      <td>Peak season visit</td>
      <td>From ¥11,800</td>
    </tr>
    <tr>
      <td>Express Pass 7</td>
      <td>Max rides in one day</td>
      <td>From ¥16,800</td>
    </tr>
  </tbody>
</table>

Live render

.al-table-sage

Creates a fully bordered table with a sage header row for softer planning content.

This works well for itinerary pacing, packing lists, and calmer informational sections.

<table class="al-table-sage">
  <thead>
    <tr>
      <th>Season</th>
      <th>Why We Like It</th>
      <th>Tradeoff</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Spring</td>
      <td>Cherry blossoms and mild days</td>
      <td>Crowds are intense</td>
    </tr>
    <tr>
      <td>Summer</td>
      <td>Festivals and long daylight</td>
      <td>Hot and humid</td>
    </tr>
    <tr>
      <td>Autumn</td>
      <td>Great foliage and cooler weather</td>
      <td>Popular hotel dates</td>
    </tr>
  </tbody>
</table>

Live render

.al-table-striped

Creates a clean table with a sage header and alternating odd-row seafoam tint for easier scanning.

Use striped rows when the table has several entries and readers need to compare lines quickly.

<table class="al-table-striped">
  <thead>
    <tr>
      <th>Airport</th>
      <th>Best Transfer</th>
      <th>Typical Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Narita</td>
      <td>Narita Express</td>
      <td>60 to 75 min</td>
    </tr>
    <tr>
      <td>Haneda</td>
      <td>Keikyu or Monorail</td>
      <td>25 to 40 min</td>
    </tr>
    <tr>
      <td>Kansai</td>
      <td>Haruka Express</td>
      <td>50 to 75 min</td>
    </tr>
  </tbody>
</table>

Live render

.al-table-minimal

Creates a light table with only horizontal dividers and a sage-accented header rule.

Use this when the table should feel editorial and unobtrusive instead of heavily boxed in.

<table class="al-table-minimal">
  <thead>
    <tr>
      <th>Area</th>
      <th>Why Stay There</th>
      <th>Best For</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Shinjuku</td>
      <td>Big station and lots of hotels</td>
      <td>First-time visitors</td>
    </tr>
    <tr>
      <td>Ueno</td>
      <td>Easy Skyliner access</td>
      <td>Families and museums</td>
    </tr>
    <tr>
      <td>Asakusa</td>
      <td>Quieter evenings and local feel</td>
      <td>Slower trips</td>
    </tr>
  </tbody>
</table>

Live render

.al-table-compare

Creates a brand comparison table where the first column acts as a highlighted feature label.

Use this for side-by-side comparisons where each row needs a clear category label on the left.

<table class="al-table-compare">
  <thead>
    <tr>
      <th>Feature</th>
      <th>Holafly</th>
      <th>Airalo</th>
      <th>Local SIM</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Unlimited Data</td>
      <td><span class="al-check">✓</span></td>
      <td><span class="al-cross">✗</span></td>
      <td><span class="al-cross">✗</span></td>
    </tr>
    <tr>
      <td>Works on Arrival</td>
      <td><span class="al-check">✓</span></td>
      <td><span class="al-check">✓</span></td>
      <td><span class="al-cross">✗</span></td>
    </tr>
    <tr>
      <td>No ID Required</td>
      <td><span class="al-check">✓</span></td>
      <td><span class="al-check">✓</span></td>
      <td><span class="al-cross">✗</span></td>
    </tr>
    <tr>
      <td>Family Plan</td>
      <td><span class="al-check">✓</span></td>
      <td><span class="al-cross">✗</span></td>
      <td><span class="al-cross">✗</span></td>
    </tr>
    <tr>
      <td>Hotspot Included</td>
      <td><span class="al-check">✓</span></td>
      <td><span class="al-cross">✗</span></td>
      <td><span class="al-cross">✗</span></td>
    </tr>
  </tbody>
</table>

Live render

Basic inline icon

Use a plain <i> tag with a data-lucide attribute to render any Lucide icon inline in post content.

Copy and paste the markup into an HTML block in Ghost Admin, or inline inside another HTML structure.

<p>Find us near the station <i data-lucide="map-pin"></i></p>

Live render

Icon sizing

Set icon size directly with inline width and height styles when you need tighter control in post content.

These examples use the same icon at 16, 24, and 32 pixels.

<i data-lucide="map-pin" style="width:16px;height:16px"></i>
<i data-lucide="map-pin" style="width:24px;height:24px"></i>
<i data-lucide="map-pin" style="width:32px;height:32px"></i>

Live render

Icon color

Change icon color with inline styles when you need a specific brand token look inside post content.

These examples use coral, sage, and ink.

<i data-lucide="heart" style="color:#F25D50"></i>
<i data-lucide="heart" style="color:#95BFBB"></i>
<i data-lucide="heart" style="color:#0D0D0D"></i>

Live render

Icon in a list

When you want a manual icon bullet, wrap the row in a flex span and place the Lucide icon first.

Use this pattern when you want more control than a normal browser bullet gives you.

<ul>
  <li>
    <span style="display:flex;align-items:center;gap:8px">
      <i data-lucide="check"></i>
      Unlimited data in 170+ countries
    </span>
  </li>
</ul>

Live render

Available icons

The theme uses Lucide for inline icons.

Browse the full library at lucide.dev. Any icon name from Lucide works in the data-lucide attribute.