Oceania Triathlon logo

Reference catalogue

Page-builder blocks — demo & reference

Every block in the World Triathlon page builder, rendered with every variation, using dummy content. Use this page as a visual catalogue when planning a page in Directus — each variation's meta card lists the fields to fill in.

Companion document: packages/ui/docs/BLOCKS.md

1. Hero

block_hero

Variation A — Image + headline + sub + 3 buttons

Background image
set (landscape)
Headline
Race the world. Beyond every limit.
Subheadline
1 supporting sentence
Buttons
Primary · Outline · Secondary
Race the world. Beyond every limit.
Championship Series

Race the world. Beyond every limit.

Follow the 2026 World Triathlon Championship Series across five continents.

Variation B — Image + single primary CTA

Background image
set
Subheadline
empty
Buttons
1 (Primary)
World Triathlon

One day. One transition. One champion.

Variation C — No image (gradient fallback), no buttons

Background image
empty → blue-to-navy gradient
Buttons
none
Sustainability

Racing toward a lighter footprint

Minimising our negative impact and using our potential to bring about positive change.

Variation D — Image variant

Variant
image
Background image
set (landscape) → rendered full-bleed with dark gradient overlay
Background video
ignored by this variant
Fallback
if no image is uploaded, the block silently renders as the default gradient hero
Sunlit miles, salt-spray finishes
On location

Sunlit miles, salt-spray finishes

Photo-led storytelling for race recaps, venue intros and travel guides.

Variation E — Video variant

Variant
video
Background video
set (autoplay · muted · loop · playsinline)
Background image
used as the video poster only
Fallback
if no video is uploaded, the block silently renders as the default gradient hero
Live action

Feel the race before you read about it

Use a short loop to set the tone for tentpole campaigns and event landing pages.

2. Richtext

block_richtext

Variation A — With headline

Headline
About this programme
Content
WYSIWYG · paragraphs + list + link

About this programme

The World Triathlon Safeguarding Programme exists to protect athletes, coaches, and officials at every level of the sport. We work with all 173 National Federations to align policies and training.

Three pillars guide every decision we make:

  • Prevention through education and culture.
  • Clear reporting channels and independent investigation.
  • Recovery support for affected individuals.

You can read more in the full policy document.

Variation B — No block headline, content starts with its own H2

Headline
empty
Content
H2 + paragraph + blockquote

Why this matters

Sport at its best is a place of belonging. We are committed to making triathlon a sport where every participant — from age-grouper to Olympian — can train, race, and travel safely.

We rise by lifting others.

If you have witnessed or experienced concerning behaviour, please reach out to your National Federation's Safeguarding Lead.

3. Image + Text

block_image_text

Rendering mode is auto-selected: Standard (image + text), Image-only, or Image + CTA overlay.

Variation A — Standard, image left

Image
set (4:3 crop applied)
Layout
image-left
Show CTA
on
CTA URL / label
# / Explore the framework
Train smarter, not just harder

Train smarter, not just harder

Our coaching framework blends sport science with two decades of championship racing experience. Build a base that holds across a full season.

Explore the framework

Variation B — Standard, image right

Layout
image-right
Show CTA
on
A community of 173 federations

A community of 173 federations

From Australia to Zambia, our network spans every continent. Pair-up with a federation near you to start your journey.

Find your federation

Variation C — Standard, image top

Layout
image-top
Show CTA
off
A sport for every body

A sport for every body

Para-triathlon, age-group, mixed relay, aquathlon, duathlon, winter triathlon — there's a discipline for every athlete.

Variation D — Image-only mode (no text, no CTA)

Image
set
Headline / Body
empty
Show CTA
off
Renders as
tall full-bleed image (60vh mobile · 85vh desktop)

Variation E — Image + CTA overlay (no text)

Image
set
Headline / Body
empty
Show CTA
on
CTA label
Explore the 2026 season
Renders as
tall full-bleed image with a floating bottom-right CTA pill

4. Columns

block_columns

Variation A — 3 columns · Cards (most common)

Columns count
3
Layout
cards
Items
3 — each with icon, eyebrow, title, body, link

Our pillars

Three commitments that shape every decision.

01 — Pillar

Education

Workshops, e-learning, and onboarding for coaches and officials.

Read more →

02 — Pillar

Reporting

Independent, confidential channels with multilingual support.

Read more →

03 — Pillar

Recovery

Long-term support for affected individuals and their families.

Read more →

Variation B — 2 columns · Cards

Columns count
2
Layout
cards

For athletes & organisers

Two perspectives on the same goal.

01 — Pillar

Education

Workshops, e-learning, and onboarding for coaches and officials.

Read more →

02 — Pillar

Reporting

Independent, confidential channels with multilingual support.

Read more →

Variation C — 4 columns · Cards

Columns count
4
Layout
cards
Note
4-up only really works on desktop

What we deliver

Four programmes running year-round.

01 — Pillar

Education

Workshops, e-learning, and onboarding for coaches and officials.

Read more →

02 — Pillar

Reporting

Independent, confidential channels with multilingual support.

Read more →

03 — Pillar

Recovery

Long-term support for affected individuals and their families.

Read more →

04 — Pillar

Governance

Aligned policies across 173 federations and the IOC.

Read more →

Variation D — 3 columns · Inline (text-forward)

Columns count
3
Layout
inline

What's included

A text-forward view of the same pillars.

Education

Workshops, e-learning, and onboarding for coaches and officials.

Read more →

Reporting

Independent, confidential channels with multilingual support.

Read more →

Recovery

Long-term support for affected individuals and their families.

Read more →

5. Stats

block_stats

Variation A — 3 columns

Columns count
3
Caption
By the numbers
Headline
World Triathlon in 2025
Items
3 — each with icon, value, label

By the numbers

World Triathlon in 2025

173
National federations
12,500
Registered athletes
94%
Coach satisfaction

Variation B — 4 columns

Columns count
4
Items
4 stats with icons

Year in review

Safeguarding impact

5,200
Training hours delivered
320
Cases handled
88%
Federations onboarded
+24
New officers trained

Variation C — 2 columns, no headline (use inline)

Columns count
2
Headline / Caption
empty
Items
2 — mix of icon / no icon
1.2M
Race-day spectators
78
Countries broadcast

6. Tabs

block_tabs

Default — 3 tabs with icons

Headline
Rules at a glance
Tabs
3 — Junior / U23 / Elite
Each tab has
icon, label, WYSIWYG content

Rules at a glance

Athletes aged 16–19. Sprint-distance only. Wave-start format with U17 separation.

  • Drafting: permitted
  • Wetsuit: temperature-based
  • Medical: pre-race screen required

7. Accordion

block_accordion

Default — 4 expandable rows

Title
Frequently asked questions
Items
4 — label + WYSIWYG content
Behaviour
only one row open at a time

Frequently asked questions

Visit your National Federation's website and follow the registration pathway for the event. Most events open registration 90–120 days before race day.

Refunds are handled by the local organising committee. See the event's race-info page for specifics.

At minimum: a road or TT bike, a helmet certified by your local standards body, running shoes, swim goggles, and a tri-suit. See the equipment guide for details.

Wetsuits are mandatory below 16°C water temperature and forbidden above 22°C for elite races. Age-group thresholds differ slightly.

8. List

block_list

Variation A — Pills CTA style (parallel actions)

Headline
Policy documents
Items
2 — each with icon, title, description
CTA style
pills
CTAs per item
2–3 — outline buttons side-by-side

Policy documents

Download in your preferred language.

Code of Conduct

Behavioural standards expected from athletes, coaches, officials, and federation staff.

Variation B — Link CTA style (longer-form actions)

Headline
Get help
Items
2 — each with icon, title, description
CTA style
link
CTAs
vertical text links with arrow
Open in new tab
one CTA toggled on (external)

Get help

Reach out to the right team for your role.

9. Quote

block_quote

Variation A — Default

Variant
default
Author image
empty
Quote
Triathlon teaches you…
Author name / title
Ana Rivera · Two-time World Champion
Triathlon teaches you that endurance is a decision, not a gift.
Ana Rivera
Two-time World Champion

Variation B — Featured (with author image)

Variant
featured
Author image
set (square headshot)
Quote
When federations align on safeguarding…
Author
Marcus Lien · President, World Triathlon
When federations align on safeguarding, athletes feel it on race day. It changes how we travel, train, and trust.
Marcus Lien
Marcus Lien
President, World Triathlon

Variation C — Inline (subtle emphasis inside long content)

Variant
inline
Quote
We rise by lifting others.
Author name
Volunteer charter
Author title
empty
We rise by lifting others.
— Volunteer charter

10. Callout

block_callout

Variant — Info (blue, default icon)

Variant
info
Icon
empty → default `info`

Variant — Success (green)

Variant
success
Default icon
check_circle

Variant — Warning (amber)

Variant
warning
Default icon
warning

Variant — Error (red)

Variant
error
Default icon
error

Variant — Note (gray)

Variant
note
Default icon
sticky_note_2

11. CTA Banner

block_cta

Variation A — 2 buttons (primary + secondary)

Headline
Sign up for the 2026 World Series
Body
1 plain-text sentence
Button 1
Register now → #
Button 2
See the calendar → #

Sign up for the 2026 World Series

Registration opens 15 January. Lock in your spot before tickets sell out.

Variation B — 1 button

Headline
Have feedback?
Button 1
Get in touch → #
Button 2
omitted (label or URL empty)

Have feedback?

We read every message. Tell us what you'd like to see next.

12. Video

block_video

Variation A — 16:9 · Default alignment

Aspect ratio
16:9
Alignment
default (centered)
Headline
Highlights — Yokohama 2025
Caption
shown below video

Highlights — Yokohama 2025

The 90-second race recap from a thrilling weekend.

Variation B — 9:16 (Shorts) · Left alignment

Aspect ratio
9:16
Alignment
left (video on left, text on right)

Hear from our athletes

Short, vertical clips work great alongside written copy.

Variation C — 1:1 (square) · Default alignment

Aspect ratio
1:1
Alignment
default

Behind the scenes

Square format suits social-style content embedded mid-article.

Variation D — 4:3 (legacy) · Right alignment

Aspect ratio
4:3
Alignment
right (video on right, text on left)

Archive footage

Legacy 4:3 aspect ratio for historical material.

13. Athletes

block_athletes

Default — horizontally-scrollable athlete carousel

Headline
Meet the 2026 ambassadors
Subheadline
1 supporting sentence
Items
6 — each is a Member relation + per-language description + link
Card shows
photo · name · country (flag + NOC) · description · link
Behaviour
horizontal snap-scroll on all screen sizes

Meet the 2026 ambassadors

Six athletes representing every continent. Hear their stories.

Ana Rivera

Ana Rivera

ESPESP

A short bio that gives just enough context for the reader to want to learn more.

Read their story →
Kai Nakamura

Kai Nakamura

JPNJPN

A short bio that gives just enough context for the reader to want to learn more.

Read their story →
Sofia Müller

Sofia Müller

GERGER

A short bio that gives just enough context for the reader to want to learn more.

Read their story →
Daniel Okafor

Daniel Okafor

NGRNGR

A short bio that gives just enough context for the reader to want to learn more.

Read their story →
Olivia Thompson

Olivia Thompson

GBRGBR

A short bio that gives just enough context for the reader to want to learn more.

Read their story →
Mateo Álvarez

Mateo Álvarez

ARGARG

A short bio that gives just enough context for the reader to want to learn more.

Read their story →

14. Countdown

block_countdown

Variation A — Future date with full content

Eyebrow / Icon
Next major event · event
Headline
Dakar 2026
Description
1 supporting sentence
Date
+90 days from now (24-hour format)
Place / Country
Dakar · Senegal — flag chip renders after the country name
Button
Event page → #
Behaviour
live ticking days/hours/min countdown
Hero adjacency
when placed directly after a block_hero, this bar sits flush below it (no gap, no top border) — mirrors YogNextGamesBar

Next major event

Dakar 2026

Sep 28, 2026 · 00:31 · Dakar, SenegalSenegal

The Youth Olympic Games triathlon — a first for the African continent.

Days
Hours
Min

Variation B — Date already passed (Live now state)

Date
1 hour ago
Behaviour
replaces counter with pulsing red Live now badge

Happening now

Yokohama 2026

Jun 29, 2026 · 23:31 · Yokohama, JapanJapan

Follow live race coverage and split times throughout the weekend.

Days
Hours
Min

Variation C — Minimal (no eyebrow, icon, country, button)

Eyebrow / Icon / Country / Button
empty
Headline
Registration closes soon
Date
+14 days from now
Behaviour
flag chip and CTA are hidden; layout collapses cleanly

Registration closes soon

Jul 14, 2026 · 00:31

Days
Hours
Min

Dummy content for design / editorial reference only.

Source of truth for fields and behaviour: packages/ui/docs/BLOCKS.md