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
stack · s_stack_numbered_v1
Stack — Numbered (UE Stacking Cards + mobile fallback)
Required: cards[].body, cards[].heading
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.
"*" indicates required fields
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.