Skip to content
BaseLayer Themes

Docs

Hero 06

Centered reviews hero with large image under the CTAs

Live preview

from 128 reviews

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/Hero06.astro

Centered reviews hero (like Hero 04) with a large image under the CTAs and optional bottom fade.

Config (blocks.ts → hero06)

hero06: {
    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/",
    rating: 5,
    reviewCount: 128,
    reviewAvatars: [
      { src: photos.karla, alt: "Sarah Chen" },
      { src: photos.edgar, alt: "Marcus Webb" },
      { initials: "ER", alt: "Elena Ruiz" },
    ],
    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 Hero06 from "@/blocks/hero/Hero06.astro";
---

<Hero06 />

Props override matching keys from config:

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

Props

Prop Config key Type / values Default / notes
width hero06.width standard | narrow | wide Wrapper max-width
heading hero06.heading string —
subheading hero06.subheading string —
primaryCta hero06.primaryCta string —
primaryCtaUrl hero06.primaryCtaUrl string —
secondaryCta hero06.secondaryCta string —
secondaryCtaUrl hero06.secondaryCtaUrl string —
reviewAvatars hero06.reviewAvatars Array of { src?: LocalImageSource, initials?: string, alt: string } —
reviewCount hero06.reviewCount number | string Shown as “from {reviewCount} reviews”
rating hero06.rating number Star rating out of 5
image hero06.image ImageMetadata (photos.*) or public path string — see Images Pass empty string to hide (where supported)
imageAlt hero06.imageAlt string —
imageWidth hero06.imageWidth standard | narrow | wide | full Max-width of media under the CTAs
imageRadius hero06.imageRadius none | md | lg | xl | 2xl Border radius of media
imageFade hero06.imageFade boolean Fade image bottom into parent background
imageFadeSize hero06.imageFadeSize sm | md | lg —
padding hero06.padding none | sm | md | lg | xl Vertical section padding
borderBottom hero06.borderBottom boolean Show a bottom border under the section
borderThickness hero06.borderThickness sm (1px) | md (2px) | lg (4px) —
borderColor hero06.borderColor soft | medium | hard —

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

← Hero versions · Blocks overview · Images