Hero Variants
Heading-Band Hero Example
Hero rendered in main-header to satisfy route-level heading-band placement.
Show code
<LayoutSection background="soft" verticalPadding="2xl">
<Hero
heading="Heading-Band Hero Example"
subheading="Hero rendered in main-header to satisfy route-level heading-band placement."
primaryAction={{ label: "Primary Action", href: "/theme-docs/" }}
secondaryAction={{ label: "Secondary Action", href: "/about/" }}
image={{ src: heroImage, alt: "Hero heading-band sample" }}
splitAt="lg"
/>
</LayoutSection>Text-Only Hero
Text-only hero verifies baseline heading, body copy, and action behavior.
Show code
<LayoutSection verticalPadding="2xl">
<Hero
heading="Text-Only Hero"
subheading="Text-only hero verifies baseline heading, body copy, and action behavior."
primaryAction={{ label: "Primary Action", href: "/theme-docs/" }}
secondaryAction={{ label: "Secondary Action", href: "/articles/" }}
/>
</LayoutSection>Hero with Right-Side Media
Validates image-aware layout with the default large-screen split breakpoint.
Show code
<LayoutSection background="soft" verticalPadding="2xl">
<Hero
heading="Hero with Right-Side Media"
subheading="Validates image-aware layout with the default large-screen split breakpoint."
primaryAction={{ label: "Explore Docs", href: "/theme-docs/" }}
image={{ src: heroImage, alt: "Hero preview image" }}
splitAt="lg"
imagePosition="right"
/>
</LayoutSection>Hero with Left-Side Media
Validates alternate image placement and earlier split breakpoint behavior.
Show code
<LayoutSection background="contrast" verticalPadding="2xl">
<Hero
heading="Hero with Left-Side Media"
subheading="Validates alternate image placement and earlier split breakpoint behavior."
primaryAction={{ label: "Read Articles", href: "/articles/" }}
image={{ src: heroImage, alt: "Hero preview image" }}
splitAt="md"
imagePosition="left"
/>
</LayoutSection>Center-Aligned Hero with Actions
Validates center alignment in the complex (action) rendering path.
Show code
<LayoutSection verticalPadding="2xl">
<Hero
heading="Center-Aligned Hero with Actions"
subheading="Validates center alignment in the complex (action) rendering path."
primaryAction={{ label: "Primary Action", href: "/theme-docs/" }}
secondaryAction={{ label: "Secondary Action", href: "/about/" }}
align="center"
/>
</LayoutSection>Right-Aligned Hero with Actions
Validates right alignment in the complex (action) rendering path.
Show code
<LayoutSection verticalPadding="2xl">
<Hero
heading="Right-Aligned Hero with Actions"
subheading="Validates right alignment in the complex (action) rendering path."
primaryAction={{ label: "Primary Action", href: "/theme-docs/" }}
align="right"
/>
</LayoutSection>Center-Aligned Hero with Image
Validates center alignment in the image+grid rendering path.
Show code
<LayoutSection background="soft" verticalPadding="2xl">
<Hero
heading="Center-Aligned Hero with Image"
subheading="Validates center alignment in the image+grid rendering path."
primaryAction={{ label: "Explore Docs", href: "/theme-docs/" }}
image={{ src: heroImage, alt: "Hero preview image" }}
splitAt="lg"
align="center"
/>
</LayoutSection>Right-Aligned Hero with Image
Validates right alignment in the image+grid rendering path.
Show code
<LayoutSection background="contrast" verticalPadding="2xl">
<Hero
heading="Right-Aligned Hero with Image"
subheading="Validates right alignment in the image+grid rendering path."
primaryAction={{ label: "Read Articles", href: "/articles/" }}
image={{ src: heroImage, alt: "Hero preview image" }}
splitAt="lg"
align="right"
/>
</LayoutSection>Minimal Hero (Page-Title Band)
Left-Aligned Page Title
Default variant — compact heading band with no actions or image.
Centered Page Title
Used for focused landing pages or error pages.
Right-Aligned Page Title
Verifies on-surface foreground handling.
Show code
{/* Left-aligned default (compact page-title band) */}
<LayoutSection background="default" contentWidth="wide" verticalPadding="lg">
<Hero
heading="Left-Aligned Page Title"
subheading="Default variant — compact heading band with no actions or image."
align="left"
/>
</LayoutSection>
{/* Centered soft */}
<LayoutSection background="soft" contentWidth="wide" verticalPadding="xl">
<Hero
heading="Centered Page Title"
subheading="Used for focused landing pages or error pages."
align="center"
/>
</LayoutSection>
{/* Right-aligned contrast */}
<LayoutSection background="contrast" contentWidth="wide" verticalPadding="lg">
<Hero
heading="Right-Aligned Page Title"
subheading="Verifies on-surface foreground handling."
align="right"
/>
</LayoutSection>CallToAction Variants
Start Your Implementation Pass
Stacked CTA keeps focus on one primary action with optional secondary support.
Show code
<SurfaceBox background="soft" class="py-xl">
<CallToAction
heading="Start Your Implementation Pass"
body="Stacked CTA keeps focus on one primary action with optional secondary support."
primaryAction={{ label: "Start", href: "/theme-docs/" }}
secondaryAction={{ label: "Learn More", href: "/about/" }}
layout="stacked"
/>
</SurfaceBox>Rounded Card CTA
Demonstrates the rounded prop for card-style call-to-action blocks.
Show code
<SurfaceBox background="contrast" class="rounded-xl">
<CallToAction
heading="Rounded Card CTA"
body="Demonstrates the rounded prop for card-style call-to-action blocks."
primaryAction={{ label: "Get Started", href: "/theme-docs/" }}
layout="stacked"
/>
</SurfaceBox>Need a More Visual CTA?
Split CTA renders content and media side by side on medium+ viewports.
Show code
<SurfaceBox background="contrast" class="py-xl">
<CallToAction
heading="Need a More Visual CTA?"
body="Split CTA renders content and media side by side on medium+ viewports."
primaryAction={{ label: "View Examples", href: "/theme-docs/showcase/" }}
media={{ src: heroImage, alt: "CTA media sample" }}
layout="split"
/>
</SurfaceBox>Split Layout Without Media
This case should collapse to stacked presentation per C5 contract.
Show code
{/* Split without media collapses to stacked */}
<SurfaceBox background="inverted" class="py-xl">
<CallToAction
heading="Split Layout Without Media"
body="This case should collapse to stacked presentation per C5 contract."
primaryAction={{ label: "Verify Behavior", href: "/theme-docs/" }}
layout="split"
/>
</SurfaceBox>Split: Actions Start
With layout='split-actions-start', buttons appear on the left with content on the right.
Show code
<SurfaceBox background="soft" class="py-xl">
<CallToAction
heading="Split: Actions Start"
body="With layout='split-actions-start', buttons appear on the left with content on the right."
primaryAction={{ label: "Left Action", href: "/theme-docs/" }}
secondaryAction={{ label: "Secondary", href: "/about/" }}
layout="split-actions-start"
/>
</SurfaceBox>Split: Actions End
With layout='split-actions-end', content appears on the left with buttons on the right.
Show code
<SurfaceBox background="contrast" class="py-xl">
<CallToAction
heading="Split: Actions End"
body="With layout='split-actions-end', content appears on the left with buttons on the right."
primaryAction={{ label: "Right Action", href: "/theme-docs/" }}
secondaryAction={{ label: "Secondary", href: "/about/" }}
layout="split-actions-end"
/>
</SurfaceBox>