hero-text-only-centred · v1 ·
released ·
static
The simplest hero variant. Centred headline + subheading on the emphasis-background colour, with up to two CTAs below. No images required. Use as the safe default when imagery isn't sorted yet, or for sites that lean editorial / text-first.
<section class="section-hero-text-only-centred-v1">
<div class="hero-container">
<h1 class="hero-headline">The earliest cafe in Long Jetty</h1>
<p class="hero-subheading">Boutique cafe offering Veneziano Coffee, juices, smoothies, shakes and delicious light meals.</p>
<div class="hero-ctas">
<a class="hero-cta hero-cta-primary" href="https://www.google.com/maps/search/?api=1&query=352%20The%20Entrance%20Rd%20Long%20Jetty%20NSW%202261">Get directions</a>
<a class="hero-cta hero-cta-secondary" href="tel:0468342880">Call 0468 342 880</a>
</div>
</div>
</section>
/* Hero — text only, centred (v1)
Namespace: .section-hero-text-only-centred-v1
Vars consumed: --bg-emphasis, --text-on-emphasis,
--spacing-section, --type-h1-size,
--radius-md, --transition-speed,
--brand-primary */
.section-hero-text-only-centred-v1 {
background: var(--bg-emphasis, #1e7a3e);
color: var(--text-on-emphasis, #ffffff);
padding: var(--spacing-section, 5rem) 1rem;
text-align: center;
}
.section-hero-text-only-centred-v1 .hero-container {
max-width: 48rem;
margin: 0 auto;
}
.section-hero-text-only-centred-v1 .hero-headline {
font-family: var(--font-heading, inherit);
font-size: var(--type-h1-size, clamp(2rem, 4.5vw, 3.5rem));
font-weight: 700;
line-height: 1.15;
margin: 0;
color: inherit;
}
.section-hero-text-only-centred-v1 .hero-subheading {
margin: 1rem auto 0;
font-size: 1.125rem;
opacity: 0.95;
max-width: 32rem;
line-height: 1.5;
}
.section-hero-text-only-centred-v1 .hero-ctas {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.section-hero-text-only-centred-v1 .hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.75rem 1.25rem;
font-weight: 600;
font-size: 0.9375rem;
border-radius: var(--radius-md, 8px);
transition: background-color var(--transition-speed, 200ms) ease,
color var(--transition-speed, 200ms) ease,
filter var(--transition-speed, 200ms) ease;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
}
.section-hero-text-only-centred-v1 .hero-cta-primary {
background: var(--text-on-emphasis, #ffffff);
color: var(--bg-emphasis, #1e7a3e);
}
.section-hero-text-only-centred-v1 .hero-cta-primary:hover {
filter: brightness(0.92);
}
.section-hero-text-only-centred-v1 .hero-cta-secondary {
background: transparent;
color: var(--text-on-emphasis, #ffffff);
border-color: var(--text-on-emphasis, #ffffff);
}
.section-hero-text-only-centred-v1 .hero-cta-secondary:hover {
background: var(--text-on-emphasis, #ffffff);
color: var(--bg-emphasis, #1e7a3e);
}
{
"_description": "Cafe-flavoured fixture \u2014 premises-based business with hours, phone, and a real address. The primary CTA defaults to 'Get directions' built from the address.",
"business": {
"business_name": "Cafe 2261",
"hero_headline": "The earliest cafe in Long Jetty",
"hero_subheading": "Boutique cafe offering Veneziano Coffee, juices, smoothies, shakes and delicious light meals.",
"phone": "0468 342 880",
"email": "hello@cafe2261.example.com.au",
"extension_data": []
},
"premises": {
"address": "352 The Entrance Rd",
"suburb": "Long Jetty",
"postcode": "2261",
"state": "NSW"
},
"template_type_id": "premises_based",
"page_section_order": [
"hero",
"about",
"menu_highlights",
"opening_hours",
"contact"
]
}{
"headline": "The earliest cafe in Long Jetty",
"subheading": "Boutique cafe offering Veneziano Coffee, juices, smoothies, shakes and delicious light meals.",
"primary_cta": {
"label": "Get directions",
"url": "https://www.google.com/maps/search/?api=1&query=352%20The%20Entrance%20Rd%20Long%20Jetty%20NSW%202261"
},
"secondary_cta": {
"label": "Call 0468 342 880",
"url": "tel:0468342880"
}
}{
"name": "hero-text-only-centred",
"version": "v1",
"display_name": "Hero \u2014 text only, centred",
"description": "The simplest hero variant. Centred headline + subheading on the emphasis-background colour, with up to two CTAs below. No images required. Use as the safe default when imagery isn't sorted yet, or for sites that lean editorial / text-first.",
"kind": "static",
"applies_to_template_types": [
"premises_based",
"local_service_area",
"sports_events"
],
"applies_to_categories": [],
"excluded_from_categories": [],
"niches": [
"any"
],
"status": "released",
"ambition_level": "low",
"principles_satisfied": [
1,
2,
3,
5,
6,
13,
18
],
"principles_inapplicable": [
4,
7,
8,
9,
10,
11,
12,
14,
15,
16,
17,
19,
20,
21,
22,
23,
24
],
"performance_budget": {
"render_ms_p95": 5,
"html_bytes": 1500,
"css_bytes": 800,
"js_bytes": 0,
"image_count_max": 0
},
"data_contract": {
"fields_consumed": [
"business.business_name",
"business.hero_headline",
"business.hero_subheading",
"business.phone",
"premises.address",
"premises.suburb",
"premises.postcode"
],
"fields_optional": [
"business.hero_subheading",
"business.phone",
"premises.address",
"premises.suburb",
"premises.postcode"
]
},
"tokens_used": [
"business_name",
"phone",
"phone_tel",
"maps_url"
],
"card_template_default": null,
"requires": [],
"recommended_with": [],
"deprecated_since": null,
"supersedes": null,
"root": "/home/slipstreamsectio/repo/sections/hero-text-only-centred/v1"
}