File: src/blocks/hero/Hero01.astro
Split hero: copy and CTAs on one side, optional image on the other. Eyebrow chip above the heading. Can embed a StatsGrid below the CTAs.
Mobile: image always stacks above the copy.
Config (blocks.ts → hero)
Stats reuse siteConfig.stats.items unless you pass a stats prop.
hero: {
width: "standard",
eyebrow: "Available for freelance & contract",
heading: "I build websites that work as hard as you do!",
subheading:
"Full-stack web development for brands that need speed, clarity, and craft. Astro, React, headless CMS, and everything in between.",
primaryCta: "View my work",
primaryCtaUrl: "/work/",
secondaryCta: "Get in touch",
secondaryCtaUrl: "/contact/",
showStats: false,
image: photos.interior,
imageAlt: "Developer workspace with laptop",
imageAspectRatio: "3/4",
imagePosition: "right",
padding: "lg",
borderBottom: false,
borderThickness: "sm",
borderColor: "soft",
},Add to a page
---
import Hero01 from "@/blocks/hero/Hero01.astro";
---
<Hero01 />Props override matching keys from config:
<Hero01
width="wide"
heading="Custom headline"
showStats={false}
/>Props
| Prop | Config key | Type / values | Default / notes |
|---|---|---|---|
width |
hero.width |
standard | narrow | wide |
Wrapper max-width |
eyebrow |
hero.eyebrow |
string |
— |
heading |
hero.heading |
string |
— |
subheading |
hero.subheading |
string |
— |
primaryCta |
hero.primaryCta |
string |
— |
primaryCtaUrl |
hero.primaryCtaUrl |
string |
— |
secondaryCta |
hero.secondaryCta |
string |
— |
secondaryCtaUrl |
hero.secondaryCtaUrl |
string |
— |
showStats |
hero.showStats |
boolean |
Render stats row under CTAs |
stats |
hero.stats |
Array of { value: string, label: string } |
Override stats.items when showStats is true |
image |
hero.image |
ImageMetadata (photos.*) or public path string — see Images |
Pass empty string to hide (where supported) |
imageAlt |
hero.imageAlt |
string |
— |
imageAspectRatio |
hero.imageAspectRatio |
string |
CSS aspect-ratio value (e.g. 3/4) |
imagePosition |
hero.imagePosition |
left | right |
Desktop image side; mobile stacking varies by block |
padding |
hero.padding |
none | sm | md | lg | xl |
Vertical section padding |
borderBottom |
hero.borderBottom |
boolean |
Show a bottom border under the section |
borderThickness |
hero.borderThickness |
sm (1px) | md (2px) | lg (4px) |
— |
borderColor |
hero.borderColor |
soft | medium | hard |
— |
Empty image hides the media column. Use photos.* — Images.