Common Blocks Reference
Reusable Content Components Across All Pages
The OnFife website uses a consistent set of content blocks across its ~70 pages. This reference documents the 12 most common blocks, their content requirements, and which pages use them. Writing these shared blocks once ensures consistency site-wide.
1
Full-width hero image with page title, subtitle, and optional CTA overlaid. Establishes the visual identity of each page. The image should be high-quality photography relevant to the page topic.
H1
Page Title
Up to 10 words
Para
Hero Subtitle / Intro Line
Up to 100 words
CTA
CTA Button (optional)
2–3 words
Hero Banner Image
16:9 • 1920×1080
2
Dark background feedback prompt that appears near the bottom of most pages. Write once and reuse across the entire site. Encourages visitors to share suggestions for improvement.
H2
Section Heading
Up to 10 words
Para
Body Copy
Up to 100 words
3
Email capture strip that sits above the footer. Includes heading, name field, email field, and sign-up button. Write once and reuse site-wide.
H3
Heading (e.g. "Join our Newsletter")
Up to 10 words
Form
Name Field
—
Form
Email Field
—
CTA
Sign-Up Button
2 words
5
Expandable FAQ section with an intro paragraph, 4+ accordion questions/answers, and a CTA button. Each page has unique FAQ content relevant to its topic.
H2
Section Heading
Up to 10 words
Para
Intro Copy
Up to 100 words
FAQ
Question ×4 (each expandable with answer)
5–15 words each
Para
Answer ×4 (hidden until expanded)
Up to 100 words each
CTA
CTA Button (e.g. "Learn More")
2–3 words
6
Contact section with heading, introductory text, and a form with standard fields. Often appears on a dark/coloured background. Some pages also include phone number and email alongside the form.
H2
Section Heading
Up to 10 words
Para
Intro / Contact Copy
Up to 100 words
Form
Fields: Name, Email, Phone, Message
—
CTA
Submit Button
1–2 words
7
Horizontal tab bar or link row that lets users jump to specific sections within a long page. Labels match section headings. Typically appears below the hero banner.
Nav
Anchor Links (matching section headings)
2–4 words each
8
A grid of cards (2–4 columns) each with an image, title, short description, and optional CTA link. Used for libraries, venues, event types, services, collections, and more. The number of cards varies per page.
H2
Section Heading
Up to 10 words
Card
Card Title (per card)
2–5 words
Card
Card Description (per card)
15–30 words
CTA
Card Link (per card, e.g. "See More")
2–3 words
Card Image (per card)
16:9 • 640×360 or 5:4 • 780×624
9
A two-column layout with a large image on one side and text content (heading, body copy, optional list, CTA) on the other. Image and text can swap sides. Used for feature sections like "Joining the Team", "Hosting Your Event", "Cultural Strategy".
H2
Section Heading
Up to 10 words
Para
Body Copy
Up to 100 words
List
Bullet Points (optional)
3–5 items
CTA
CTA Button
2–3 words
Feature Image
5:4 • 780×624
10
A row or carousel of customer/press review quotes. Each quote has the review text plus reviewer name and affiliation. Typically 3–4 reviews shown.
Quote
Review Quote (per review)
20–35 words
Label
Reviewer Name & Affiliation (per review)
4–6 words
11
Practical visitor information: opening hours, accessibility, getting there, parking, food & drink. Often uses an accordion or icon grid layout. Variations include "Plan Your Visit", "Your Visit", "Finding Us", "Opening Hours".
H2
Section Heading
Up to 10 words
Para
Intro Copy
Up to 100 words
List
Accordion/Icon Items (Opening Hours, Getting Here, Parking, Access, Food & Drink)
Up to 100 words each
CTA
CTA Button (e.g. "See More")
2–3 words
12
A horizontal row of category pill badges or tags, often in the hero area. Allows quick navigation to sub-categories. Used on hub pages like Libraries, Visit & Explore, Read & Learn, Hire A Space.
Label
Category Tag Labels (×4–8 tags)
2–3 words each
▢
All images across the site fall into one of four standard aspect ratios and sizes. Sizes are recommended minimums — larger is always acceptable.
Hero / Full-Width Banner — hero banners, photo galleries
16:9 • 1920×1080
Card Image — news cards, event cards, venue cards
16:9 • 640×360
Feature Image — image+text splits, feature sections
5:4 • 780×624
Portrait / Avatar — board members, cast, team
1:1 • 400×400