SECTION LIBRARY
Every section in the library
30 sections in role order. Each rendered with canonical placeholder content. Scroll, scan, copy a component_id, paste into your layout spec.
hero · s_hero_fullbleed_v1
Hero — Full-bleed background image
Required: body, headline, primary_cta.label, primary_cta.url
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
hero · s_hero_image_v1
Hero — Text + Image
Required: body, headline, image.url, primary_cta.label, primary_cta.url
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
hero · s_hero_mini_v1
Hero — Mini (interior pages)
Required: body, headline
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
hero · s_hero_text_v1
Hero — Text only
Required: body, headline, primary_cta.label, primary_cta.url
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
Supporting tagline beneath the headline
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
intro · s_intro_text_v1
Intro — Text only
Required: body, headline
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
intro · s_intro_text_visual_v1
Intro — Text + Visual (50/50)
Required: body, headline, image.url
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
columns · s_cols_2_text_visual_v1
Two Columns — Text + Visual
Required: body, headline, image.url, primary_cta.label, primary_cta.url
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
grid · s_grid_feature_2_v1
Grid — Feature Cards (2)
Required: cards[].body, cards[].heading, cards[].image.url
CATEGORY 1
Card 1 heading
Short card body for card 1. Two lines max.
CATEGORY 2
Card 2 heading
Short card body for card 2. Two lines max.
grid · s_grid_feature_3_v1
Grid — Feature Cards (3)
Required: cards[].body, cards[].heading, cards[].image.url
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
CATEGORY 1
Card 1 heading
Short card body for card 1. Two lines max.
CATEGORY 2
Card 2 heading
Short card body for card 2. Two lines max.
CATEGORY 3
Card 3 heading
Short card body for card 3. Two lines max.
grid · s_grid_icon_flex_v1
Grid — Icon + Heading + Body (4 cells)
Required: cards[].body, cards[].heading
Card 1 heading
Short card body for card 1. Two lines max.
Card 2 heading
Short card body for card 2. Two lines max.
Card 3 heading
Short card body for card 3. Two lines max.
Card 4 heading
Short card body for card 4. Two lines max.
grid · s_grid_people_v1
Grid — People (Headshot + Name + Role)
Required: people[].body, people[].image.url, people[].name
Person 1
Their role here
Short bio for person 1.
Person 2
Their role here
Short bio for person 2.
Person 3
Their role here
Short bio for person 3.
grid · s_grid_posts_3_v1
Grid — Recent Posts (UE dynamic)
Required: headline
⚠ Dynamic — pulls live posts via UE Post Grid.
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
stack · s_process_horizontal_v1
Process — Horizontal Step Row (4 steps)
Required: steps[].body, steps[].heading, steps[].number
1
Step 1 heading
Step 1 explanation. One short sentence.
2
Step 2 heading
Step 2 explanation. One short sentence.
3
Step 3 heading
Step 3 explanation. One short sentence.
4
Step 4 heading
Step 4 explanation. One short sentence.
stack · s_process_vertical_v1
Process — Vertical Step Timeline (UE)
Required: steps[].body, steps[].heading
Step 1 explanation. One short sentence.
Step 2 explanation. One short sentence.
Step 3 explanation. One short sentence.
Step 4 explanation. One short sentence.
stack · s_stack_numbered_v1
Stack — Numbered (UE Stacking Cards + mobile fallback)
Required: cards[].body, cards[].heading
Short card body for card 1. Two lines max.
Short card body for card 2. Two lines max.
Short card body for card 3. Two lines max.
Short card body for card 4. Two lines max.
proof · s_band_stats_cta_v1
Proof — Stats Band with CTA (dark)
Required: body, headline, primary_cta.label, primary_cta.url, stats[].label, +1 more
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
proof · s_logos_band_v1
Proof — Logo Carousel
proof · s_reviews_strip_v1
Proof — Reviews Strip (Smashballoon)
Required: feed_id
⚠ Dynamic — requires Smashballoon feed configured.
proof · s_stats_band_v1
Proof — Stats Band (4 counters)
Required: stats[].label, stats[].value
proof · s_testimonial_overlay_v1
Proof — Testimonial Overlay (single quote, background image)
Required: attribution.name, quote
content · s_custom_html_v1
Custom HTML widget (escape hatch)
Required: html
⚠ Escape hatch — per-page bespoke HTML.
content · s_faq_v1
Content — FAQ Accordion
Required: headline, items[].answer, items[].question
Section headline goes here
Question 1 about the service or product?
The answer to question 1. One or two short paragraphs.
Question 2 about the service or product?
The answer to question 2. One or two short paragraphs.
Question 3 about the service or product?
The answer to question 3. One or two short paragraphs.
Question 4 about the service or product?
The answer to question 4. One or two short paragraphs.
Question 5 about the service or product?
The answer to question 5. One or two short paragraphs.
content · s_list_iconified_v1
Content — Icon List
Required: items[].text
- List item 1
- List item 2
- List item 3
- List item 4
- List item 5
content · s_pricing_cards_v1
Content — Pricing Cards (3 tiers)
Required: tiers[].cta.label, tiers[].features[].text, tiers[].name, tiers[].price
Tier 2
Plan description- Feature 1
- Feature 2
- Feature 3
- Feature 4
Tier 3
Plan description- Feature 1
- Feature 2
- Feature 3
- Feature 4
content · s_tabs_content_v1
Content — Tabbed Content (UE Remote Tabs)
Required: headline, tabs[].heading, tabs[].label
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
Tab 1 content heading
Tab 1 content paragraph.
Tab 2 content heading
Tab 2 content paragraph.
Tab 3 content heading
Tab 3 content paragraph.
Tab 4 content heading
Tab 4 content paragraph.
cta · s_cta_band_v1
CTA — Closing Band (single CTA, dark)
Required: headline, primary_cta.label, primary_cta.url
EXAMPLE EYEBROW
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
form · s_contact_cards_v1
Form — Contact Method Cards
Required: headline, people[].name
Section headline goes here
- hello@example.com
- 123 Example Street, Suburb
form · s_form_card_v1
Form — Single-card form (Gravity Forms)
Required: form_id, headline
⚠ Dynamic — requires Gravity Forms form_id.
Section headline goes here
One short paragraph showing how body copy reads in this section. Two sentences max — conversational and specific.
END OF LIBRARY
Need something not on this page?
Read style-guide.md §6.4 (custom HTML widgets) for one-off bespoke pieces. For recurring patterns, propose a new s-* via LIFECYCLE.md §4.