Every component, with its class

The travel-specific pieces first — the ones a generic UI kit does not have — then the general kit underneath. Each specimen shows the class you copy.

Travel components

These are the reason to buy a travel template rather than a generic one. All of them read their data from tours in src/data/tours.ts, so adding a journey does not mean touching markup.

Departure row.departure · .departure__date · .departure__status

14 Sep 2027

4 places left

Escorted · 12 nights

€4,850

Reserve

9 Nov 2027

Available

Winter departure

€4,410

Reserve

Payment meter.meter · .meter__bar

5% paid — the width is set inline so it can be driven from whatever your backend reports.

Booking status.status--deposit · --awaiting · --done · --cancel

Deposit paidAwaiting depositCompletedCancelled

Season chips.season-chip · .is-active

On the destinations page these re-rank places for the chosen month from a months field on each destination, so a new destination needs no new code.

Compare toggle.compare-toggle · .is-on

The dashed box is the stage, not the component — it stands in for the tour card the toggle pins itself to.

Included / excluded list.include-grid · .include · .include--no

First-class rail between cities

All museum entries

International flights

Travel insurance

Cards

Every card is a link, sized by its grid rather than a fixed width, so they drop into any column count without modification.

Price card.price-card · .is-featured

Independent

€980 per person

Hotels and rail booked for you
Route notes and reservations
Duty phone while you travel

Choose

Small group

€4,850 per person

Everything in Independent
Art historian guide throughout
Maximum twelve travellers

Choose

Team card.team-grid · .team-card

Camille Reyes

Italy specialist

Fifteen years walking the Uffizi before opening. Writes the Florence itineraries.

Tomas Lind

Rail & logistics

Books every connection and reconfirms it 48 hours before you travel.

Feature cell.feature-grid · .feature

Planned end to end

Rail, hotels, entries and transfers arranged as one itinerary rather than six bookings.

Twelve at most

Group departures are capped so a guide can actually answer a question.

Info card.info-card

Visas

Most nationalities enter the Schengen area without a visa for ninety days. Check yours before booking.

Currency

The euro throughout, except Croatia’s coastal kuna holdouts and the Swiss legs.

Content blocks

Timeline.timeline · .timeline__item

2004

Two people, one route

Started with a single Paris-to-Rome rail itinerary and a borrowed office.

2019

Guides on the payroll

Moved from freelance guiding to seasonal contracts, which is why the same faces return each year.

Step list.step-list__item · .step-list__num

Tell us the shape of the trip

Dates, rough budget, and what you actually enjoy.

We draft an itinerary

Usually within two working days, costed in full.

Icon wells & avatars.icon-box --sm --lg · .avatar --sm --solid

CRTLMJ

Buttons & labels

Buttons.btn --accent --primary --outline --ghost --sm --lg

On dark grounds.btn--ghost-light · .btn--outline-dark

Badges, chips and tags.badge · .chip · .tag · .pill

Small group4 places leftFeaturedRail

Micro-labels.label · .eyebrow · .kicker

Departure

Signature journeys

All three come from one mixin, so changing the tracking or colour is a single edit in abstracts/_mixins.scss — which regenerates nomadx.css for this edition too.

Forms

Fields.field · .field__label · .input · .select · .textarea

Full name

Region

Anything we should know

Send me two emails a year, and nothing else

Validation messages.form-note--ok · .form-note--err · .field__hint · .field__error

EmailEnter an address we can reply to.

PhoneOnly used if a departure changes at short notice.

Thank you — a specialist will reply within one working day.

Something went wrong. Try again, or call the duty phone.

Feedback & states

Loading, empty and error states ship with the template rather than being left for you to invent.

Empty state.empty-state

No journeys match those filters

Try widening the price range, or clear the filters and start again.

Loading skeleton.skeleton · .skeleton-title · .skeleton-line

Applied to any [data-bg] element whose image takes more than a moment, then removed once it loads.

Spinner.spinner