Skip to content
BaseLayer Themes

Docs

Hero 12

50/50 with reviews above the right-column text

Live preview

I build websites that work as hard as you do!

from 128 reviews

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

Like Hero 11, with review avatars and rating above the right-column body copy.

Config (blocks.ts → hero12)

hero12: {
    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/",
    headingSize: "display",
    textSize: "lg",
    textPlacement: "center",
    rating: 5,
    reviewCount: 128,
    reviewAvatars: [
      { src: photos.karla, alt: "Sarah Chen" },
      { src: photos.edgar, alt: "Marcus Webb" },
      { initials: "ER", alt: "Elena Ruiz" },
    ],
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
  },

Add to a page

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

<Hero12 />

Props override matching keys from config:

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

Props

Prop Config key Type / values Default / notes
width hero12.width standard | narrow | wide Wrapper max-width
heading hero12.heading string —
subheading hero12.subheading string —
primaryCta hero12.primaryCta string —
primaryCtaUrl hero12.primaryCtaUrl string —
secondaryCta hero12.secondaryCta string —
secondaryCtaUrl hero12.secondaryCtaUrl string —
headingSize hero12.headingSize display | displaySm Left-column heading scale
textSize hero12.textSize lg | base | sm Right-column / body text scale
textPlacement hero12.textPlacement top | center | bottom Vertical alignment of copy
reviewAvatars hero12.reviewAvatars Array of { src?: LocalImageSource, initials?: string, alt: string } —
reviewCount hero12.reviewCount number | string Shown as “from {reviewCount} reviews”
rating hero12.rating number Star rating out of 5
padding hero12.padding none | sm | md | lg | xl Vertical section padding
borderBottom hero12.borderBottom boolean Show a bottom border under the section
borderThickness hero12.borderThickness sm (1px) | md (2px) | lg (4px) —
borderColor hero12.borderColor soft | medium | hard —

← Hero versions · Blocks overview · Images