Skip to content
BaseLayer Themes

Docs

Hero 03

Centered eyebrow, heading, subheading, and 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

File: src/blocks/hero/Hero03.astro

Centered marketing hero with eyebrow, heading, subheading, and CTAs. No media column.

Config (blocks.ts → hero03)

hero03: {
    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/",
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
  },

Add to a page

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

<Hero03 />

Props override matching keys from config:

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

Props

Prop Config key Type / values Default / notes
width hero03.width standard | narrow | wide Wrapper max-width
eyebrow hero03.eyebrow string —
heading hero03.heading string —
subheading hero03.subheading string —
primaryCta hero03.primaryCta string —
primaryCtaUrl hero03.primaryCtaUrl string —
secondaryCta hero03.secondaryCta string —
secondaryCtaUrl hero03.secondaryCtaUrl string —
padding hero03.padding none | sm | md | lg | xl Vertical section padding
borderBottom hero03.borderBottom boolean Show a bottom border under the section
borderThickness hero03.borderThickness sm (1px) | md (2px) | lg (4px) —
borderColor hero03.borderColor soft | medium | hard —

← Hero versions · Blocks overview