File: src/blocks/hero/Hero07.astro
Full-bleed split hero (no section padding). Tune image side, horizontal share, desktop height, and text placement.
Mobile: imagePosition: "right" stacks image above copy; "left" keeps copy above image.
Config (blocks.ts → hero07)
hero07: {
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/",
image: photos.oskar,
imageAlt: "Portrait",
imagePosition: "right",
imageShare: "half",
height: "md",
textPlacement: "center",
borderBottom: false,
borderThickness: "sm",
borderColor: "soft",
},Add to a page
---
import Hero07 from "@/blocks/hero/Hero07.astro";
---
<Hero07 />Props override matching keys from config:
<Hero07
heading="Custom headline"
imagePosition="left"
borderBottom={false}
/>Props
| Prop | Config key | Type / values | Default / notes |
|---|---|---|---|
eyebrow |
hero07.eyebrow |
string |
— |
heading |
hero07.heading |
string |
— |
subheading |
hero07.subheading |
string |
— |
primaryCta |
hero07.primaryCta |
string |
— |
primaryCtaUrl |
hero07.primaryCtaUrl |
string |
— |
secondaryCta |
hero07.secondaryCta |
string |
— |
secondaryCtaUrl |
hero07.secondaryCtaUrl |
string |
— |
image |
hero07.image |
ImageMetadata (photos.*) or public path string — see Images |
Pass empty string to hide (where supported) |
imageAlt |
hero07.imageAlt |
string |
— |
imagePosition |
hero07.imagePosition |
left | right |
Desktop image side; mobile stacking varies by block |
imageShare |
hero07.imageShare |
half | twoThirds |
Desktop horizontal share for the image column |
height |
hero07.height |
auto | sm | md | lg | full |
Desktop min-height preset; auto = content height |
textPlacement |
hero07.textPlacement |
top | center | bottom |
Vertical alignment of copy |
borderBottom |
hero07.borderBottom |
boolean |
Show a bottom border under the section |
borderThickness |
hero07.borderThickness |
sm (1px) | md (2px) | lg (4px) |
— |
borderColor |
hero07.borderColor |
soft | medium | hard |
— |
No padding / width props — full-bleed split. Prefer photos.* — Images.