File: src/blocks/hero/Hero23.astro
Two separate rounded panels (copy + image) with a gap between them. Flip sides with imagePosition. Shared radius applies to both boxes. Copy panel fill via backgroundColor + contentTone.
Config (blocks.ts → hero23)
hero23: {
width: "full",
contentWidth: "wide",
backgroundColor: "oklch(94% 0.012 260)",
contentTone: "dark",
image: photos.karla,
imagePosition: "right",
height: "sm",
textPlacement: "center",
textAlign: "left",
radius: "2xl",
gap: "md",
},Add to a page
---
import Hero23 from "@/blocks/hero/Hero23.astro";
---
<Hero23 /><Hero23 imagePosition="left" gap="lg" height="md" textPlacement="top" />Props
| Prop | Config key | Type / values | Default / notes |
|---|---|---|---|
width |
hero23.width |
narrow | standard | wide | full |
Row max-width; full keeps gutter |
contentWidth |
hero23.contentWidth |
standard | narrow | wide | full |
Copy column max-width |
backgroundColor |
hero23.backgroundColor |
CSS color | Copy panel fill |
contentTone |
hero23.contentTone |
light | dark |
Copy / CTA contrast |
image / imageAlt |
hero23.image |
LocalImageSource / string |
Prefer photos.* |
imagePosition |
hero23.imagePosition |
left | right |
Flip panels |
height |
hero23.height |
auto | sm | md | lg | full |
Panel min-height |
textPlacement |
hero23.textPlacement |
top | center | bottom |
Vertical copy align |
textAlign |
hero23.textAlign |
left | center | right |
— |
radius |
hero23.radius |
radius token | Shared by both panels |
gap |
hero23.gap |
sm | md | lg |
Space between panels |
| Border props | — | same as other heroes | — |