File: src/blocks/hero/Hero11.astro
Editorial 50/50: large heading on the left; body text and CTAs on the right. Tune heading/text scale and vertical alignment.
Config (blocks.ts → hero11)
hero11: {
width: "wide",
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/",
headingSize: "display",
textSize: "lg",
textPlacement: "center",
padding: "lg",
borderBottom: false,
borderThickness: "sm",
borderColor: "soft",
},Add to a page
---
import Hero11 from "@/blocks/hero/Hero11.astro";
---
<Hero11 />Props override matching keys from config:
<Hero11
width="wide"
heading="Custom headline"
padding="md"
/>Props
| Prop | Config key | Type / values | Default / notes |
|---|---|---|---|
width |
hero11.width |
standard | narrow | wide |
Wrapper max-width |
heading |
hero11.heading |
string |
— |
subheading |
hero11.subheading |
string |
— |
primaryCta |
hero11.primaryCta |
string |
— |
primaryCtaUrl |
hero11.primaryCtaUrl |
string |
— |
secondaryCta |
hero11.secondaryCta |
string |
— |
secondaryCtaUrl |
hero11.secondaryCtaUrl |
string |
— |
headingSize |
hero11.headingSize |
display | displaySm |
Left-column heading scale |
textSize |
hero11.textSize |
lg | base | sm |
Right-column / body text scale |
textPlacement |
hero11.textPlacement |
top | center | bottom |
Vertical alignment of copy |
padding |
hero11.padding |
none | sm | md | lg | xl |
Vertical section padding |
borderBottom |
hero11.borderBottom |
boolean |
Show a bottom border under the section |
borderThickness |
hero11.borderThickness |
sm (1px) | md (2px) | lg (4px) |
— |
borderColor |
hero11.borderColor |
soft | medium | hard |
— |