Skip to content
BaseLayer Themes

Docs

Hero 05

Centered hero with large image under the CTAs

Live preview

Available for freelance & contract

I build websites that work as hard as you do!

Full-stack web development for brands that need speed, clarity, and craft. Astro, React, headless CMS, and everything in between.

View my workGet in touch
Portrait

File: src/blocks/hero/Hero05.astro

Centered hero like Hero 03 with a large image under the CTAs. Supports media width, radius, and optional bottom fade.

Config (blocks.ts → hero05)

hero05: {
    width: "wide",
    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",
    imageWidth: "wide",
    imageRadius: "2xl",
    imageFade: true,
    imageFadeSize: "md",
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
  },

Add to a page

---
import Hero05 from "@/blocks/hero/Hero05.astro";
---

<Hero05 />

Props override matching keys from config:

<Hero05
  width="wide"
  heading="Custom headline"
  padding="md"
/>

Props

Prop Config key Type / values Default / notes
width hero05.width standard | narrow | wide Wrapper max-width
eyebrow hero05.eyebrow string —
heading hero05.heading string —
subheading hero05.subheading string —
primaryCta hero05.primaryCta string —
primaryCtaUrl hero05.primaryCtaUrl string —
secondaryCta hero05.secondaryCta string —
secondaryCtaUrl hero05.secondaryCtaUrl string —
image hero05.image ImageMetadata (photos.*) or public path string — see Images Pass empty string to hide (where supported)
imageAlt hero05.imageAlt string —
imageWidth hero05.imageWidth standard | narrow | wide | full Max-width of media under the CTAs
imageRadius hero05.imageRadius none | md | lg | xl | 2xl Border radius of media
imageFade hero05.imageFade boolean Fade image bottom into parent background
imageFadeSize hero05.imageFadeSize sm | md | lg —
padding hero05.padding none | sm | md | lg | xl Vertical section padding
borderBottom hero05.borderBottom boolean Show a bottom border under the section
borderThickness hero05.borderThickness sm (1px) | md (2px) | lg (4px) —
borderColor hero05.borderColor soft | medium | hard —

Image fade uses HeroMediaFade helpers. Prefer photos.* — Images.

← Hero versions · Blocks overview · Images