Text styleseyebrow + heading + lede + script flourish

<p class="eyebrow">Fresh off the road</p>
<h2>Latest travel guides</h2>
<p class="lede">Everything we wish somebody had told us before we booked the flight.</p>
<p class="script" style="font-size: var(--step-2);">Welcome to our travel blog</p>

Variants

<div class="cluster">
    <a class="button" href="#">Read our story</a>
    <a class="button button--accent" href="#">Browse destinations</a>
    <a class="button button--outline" href="#">See all tools</a>
    <a class="button button--ghost" href="#">Keep reading</a>
</div>

Sizes and states

<div class="cluster">
    <a class="button button--small" href="#">Small</a>
    <a class="button" href="#">Default</a>
    <a class="button button--large" href="#">Large</a>
    <a class="button" href="#" aria-disabled="true">Disabled</a>
</div>

On dark surfacesuse --button--invert over photography and the footer

<div class="cluster">
    <a class="button button--invert" href="#">On a photo</a>
    <a class="button button--accent" href="#">Primary</a>
</div>

Eyebrow and tag

<p class="eyebrow">Where we've been</p>
<p class="eyebrow eyebrow--muted">The archive</p>
<div class="cluster" style="margin-top: 1rem;">
    <span class="tag">southeast asia</span>
    <span class="tag tag--accent">itinerary</span>
    <span class="tag tag--solid">planning</span>
    <a class="tag" href="#">japan</a>
</div>

Tag cloudfoot of every tag archive; the current tag is accented

<ul class="tag-cloud">
    <li><a class="tag tag--accent" href="#" aria-current="page">Southeast Asia<span class="tag__count">6</span></a></li>
    <li><a class="tag" href="#">Itinerary<span class="tag__count">3</span></a></li>
    <li><a class="tag" href="#">Planning<span class="tag__count">8</span></a></li>
    <li><a class="tag" href="#">DIY<span class="tag__count">2</span></a></li>
    <li><a class="tag" href="#">VPN<span class="tag__count">1</span></a></li>
</ul>

Meta linebyline, date and reading time on every post

<ul class="meta-line">
    <li>By Daniela and Will</li>
    <li><time datetime="2025-05-08">8 May 2025</time></li>
    <li>9 minutes to read</li>
</ul>

Section anatomythe wrapper every home page block uses

<section class="section section--tinted">
    <div class="shell">
        <div class="section-header section-header--center">
            <p class="eyebrow">Where we've been</p>
            <h2 class="section-header__title">Pick a corner of the world</h2>
            <p>Two continents down, plenty to go.</p>
        </div>
        <div class="grid">
            <!-- cards go here -->
        </div>
    </div>
</section>

Standard post card

Indonesia

Komodo Island Tour

Everything you need to know before taking a tour around the Komodo Islands!

8 May 2025

<article class="card">
    <div class="card__media">
        <img src="/assets/img/posts/asia/komodocover.jpg" alt="Aerial shot of the Komodo Islands">
    </div>
    <div class="card__body">
        <p class="eyebrow">Indonesia</p>
        <h3 class="card__title"><a href="#">Komodo Island Tour</a></h3>
        <p class="card__excerpt">Everything you need to know before taking a tour around the Komodo Islands!</p>
        <p class="card__meta">8 May 2025</p>
    </div>
</article>

Horizontal cardsidebars, related posts, search results

Lombok by Motorbike

Everything you need to know before riding around Lombok!

<article class="card card--horizontal">
    <div class="card__media">
        <img src="/assets/img/posts/asia/lombokcover.JPEG" alt="A waterfall in the hills of Lombok">
    </div>
    <div class="card__body">
        <h3 class="card__title"><a href="#">Lombok by Motorbike</a></h3>
        <p class="card__excerpt subtle">Everything you need to know before riding around Lombok!</p>
    </div>
</article>

Overlay cardfor hero-adjacent features only — text over photography needs the scrim

Itinerary

Nine Months in Europe

How we planned and executed our entire nine month Europe trip.

<article class="card card--overlay">
    <div class="card__media">
        <img src="/assets/img/posts/europe/IMG_7233.jpg" alt="Orange sunset over a Norwegian harbour">
    </div>
    <div class="card__body">
        <p class="eyebrow">Itinerary</p>
        <h3 class="card__title"><a href="#">Nine Months in Europe</a></h3>
        <p class="card__excerpt">How we planned and executed our entire nine month Europe trip.</p>
    </div>
</article>

Boxed cardtext-only cards: tools, resources, calls to action

<article class="card card--boxed">
    <div class="card__body">
        <p class="eyebrow">Tool</p>
        <h3 class="card__title"><a href="#">How to Use the Budget Sheets</a></h3>
        <p class="card__excerpt">Track every euro and rupiah so the money lasts as long as the trip does.</p>
    </div>
</article>

Tiles

6 guides Southeast Asia 2 guides Europe

<div class="grid grid--4">
    <a class="tile" href="#">
        <img src="/assets/img/posts/asia/cover.jpg" alt="Mountain road in northern Vietnam">
        <span class="tile__label">
            <span class="tile__count">6 guides</span>
            Southeast Asia
        </span>
    </a>
    <a class="tile" href="#">
        <img src="/assets/img/posts/europe/IMG_7233.jpg" alt="Orange sunset over a Norwegian harbour">
        <span class="tile__label">
            <span class="tile__count">2 guides</span>
            Europe
        </span>
    </a>
</div>

Photographic herohome page only

Welcome to our travel blog

Two people, a long way from home.

Guides, budgets and hard-won lessons from Europe and Southeast Asia.

Browse destinations Meet Daniela & Will

<section class="hero hero--center hero--compact">
    <div class="hero__media">
        <img src="/assets/img/en.jpg" alt="A winding coastal road seen from above">
    </div>
    <div class="hero__inner">
        <div class="hero__content">
            <span class="hero__script">Welcome to our travel blog</span>
            <h1 class="hero__title">Two people, a long way from home.</h1>
            <p class="hero__lede">Guides, budgets and hard-won lessons from Europe and Southeast Asia.</p>
            <div class="hero__actions">
                <a class="button button--accent" href="#">Browse destinations</a>
                <a class="button button--invert" href="#">Meet Daniela &amp; Will</a>
            </div>
        </div>
    </div>
</section>

Page headerrendered by src/layouts/Page.astro from title, eyebrow and byline

<header class="page-hero">
    <div class="page-hero__inner">
        <p class="eyebrow">Design system</p>
        <h1 class="page-hero__title">Style Guide</h1>
        <p class="page-hero__lede">A tinted header for standard pages — supplied automatically by the page layout.</p>
    </div>
</header>

Post headerrendered by src/layouts/Post.astro from front matter

<header class="post-hero">
    <div class="post-hero__inner">
        <ol class="breadcrumb">
            <li><a href="/">Home</a></li>
            <li>asia</li>
        </ol>
        <h1 class="post-hero__title">Komodo Island Tour</h1>
        <p class="post-hero__byline">Everything you need to know before taking a tour around the Komodo Islands!</p>
        <ul class="meta-line post-hero__meta">
            <li>By Daniela and Will</li>
            <li><time datetime="2025-05-08">8 May 2025</time></li>
            <li>9 minutes to read</li>
        </ul>
    </div>
</header>

Noticewrite this markdown — the notices transform builds the box

> ❕ Tip: Arrive in Labuan Bajo at least one day before with enough time to get everything sorted.

> ⚠ Warning: The national park entry fee is not always included in the tour price.

Callout

<div class="callout callout--accent">
    <p class="callout__title">What to pack</p>
    <p>Reef-safe sunscreen, a dry bag and more cash than you think you need — there is no ATM on the boat.</p>
</div>

Callout, inverted

<div class="callout callout--invert">
    <p class="callout__title">Our verdict</p>
    <p>Worth every rupiah. Book the overnight tour and sleep on the boat.</p>
</div>

Table of contents

<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="#get-there">How to Get There</a></li>
        <li><a href="#tour">What to Look for in a Tour</a></li>
        <li><a href="#length">How Many Days</a></li>
        <li><a href="#route">The Route</a></li>
    </ul>
</div>

Fields

<div class="stack">
    <div class="field">
        <label class="field__label" for="sg-email">Email address</label>
        <input class="input" id="sg-email" type="email" placeholder="you@example.com">
        <span class="field__hint">We only email when there's a new guide.</span>
    </div>
    <div class="field">
        <label class="field__label" for="sg-select">Destination</label>
        <select class="select" id="sg-select">
            <option>Southeast Asia</option>
            <option>Europe</option>
        </select>
    </div>
    <div class="field">
        <label class="field__label" for="sg-message">Message</label>
        <textarea class="textarea" id="sg-message" placeholder="Ask us anything"></textarea>
    </div>
    <div class="field">
        <label class="field__label" for="sg-error">Email address</label>
        <input class="input input--invalid" id="sg-error" type="email" value="not-an-email">
        <span class="field__error">That doesn't look like an email address.</span>
    </div>
</div>

Newsletter

<div class="newsletter">
    <p class="eyebrow">Stay in touch</p>
    <h2 class="newsletter__title">New guides, straight from the road</h2>
    <p class="newsletter__lede">We post when we've actually got something worth saying.</p>
    <form class="newsletter__form">
        <div class="field">
            <label class="field__label screen-reader-text" for="sg-news">Email address</label>
            <input class="input" id="sg-news" type="email" placeholder="you@example.com">
        </div>
        <button class="button button--accent" type="submit">Subscribe</button>
    </form>
    <p class="newsletter__note">No spam. Unsubscribe whenever.</p>
</div>

Article shellthe structure src/layouts/Post.astro produces

<article class="hentry post">
    <header class="post-hero">…</header>
    <div class="entry-content prose">
        <!-- markdown output drops straight in here -->
    </div>
    <footer class="post-footer">…</footer>
</article>

Figure with captionsrc, alt, sizes, caption, classes, loading, fetchpriority, decoding

Like our photos? Find them on Shutter stock .

<Figure
    src="/assets/img/posts/asia/komodocover.jpg"
    alt="Aerial shot of islands surrounded by beaches and blue water"
    sizes="100vw"
    caption="Beautiful aerial shot of the Komodo Islands"
/>

Table

<table>
    <thead>
        <tr><th>Route</th><th>Duration</th><th>Cost (IDR)</th></tr>
    </thead>
    <tbody>
        <tr><td>Labuan Bajo &rarr; Padar</td><td>4 hours</td><td>1,600,000</td></tr>
        <tr><td>Padar &rarr; Pink Beach</td><td>1 hour</td><td>included</td></tr>
        <tr><td>Park entry fee</td><td>&mdash;</td><td>600,000</td></tr>
    </tbody>
</table>

Code blockhighlighted by Shiki, the same pipeline markdown code fences use

.card__title a {
    color: inherit;
    text-decoration: none;
}

.card__title a {
    color: inherit;
    text-decoration: none;
}

Required keys

---
title: Komodo Island Tour
date: 2025-05-08
author: Daniela and Will
tags:
 - asia
 - southeast-asia
 - planning
draft: false
byline: Everything you need to know before taking a tour around the Komodo Islands!
heroImage: /assets/img/posts/asia/komodocover.jpg
heroImageAlt: Aerial shot of islands surrounded by beaches and blue water
seo:
  title: The Best Way to Visit the Komodo Islands in 2025
  description: Everything you need to know before taking a tour from Labuan Bajo.
  changeFrequency: yearly
---

Linkingevery internal link goes through a locale filter

<!-- a link to a page that exists in every language -->
<a href={localeUrl('/about/', lang)}>{t(lang)('header.home')}</a>

<!-- a link to an English-only page, safe from every locale -->
<a href={localeFallbackUrl('/affiliates/', lang)}>
    {t(lang)('footer.affiliates')}
</a>

Language switchcurrent locale is solid, available locales outline, untranslated pages dashed and disabled

<div class="switch-language">
    <a href="#" lang="en" hreflang="en" aria-label="EN: English" aria-current="page" class="current">EN</a>
    <a href="#" lang="es" hreflang="es" aria-label="ES: Spanish">ES</a>
    <span aria-label="FR: French" class="disabled">FR</span>
</div>