Skip to content
BaseLayer Themes

Docs

Hero 16

50/50 — copy left, dual vertical image strips

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 in soft light
Workspace detail
Architectural study
Product still
Editorial portrait
Interior detail
Lifestyle still
Portrait study

File: src/blocks/hero/Hero16.astro

50/50 hero: left copy; right dual vertical image strips scrolling opposite ways via ScrollerImageStripTrack.

Mobile: strips stack above the copy.

Config (blocks.ts → hero16)

hero16: {
    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/",
    stripAImages: [
      { src: photos.karla, alt: "Portrait in soft light" },
      { src: photos.workspace, alt: "Workspace detail" },
      { src: photos.alexander, alt: "Architectural study" },
      { src: photos.product, alt: "Product still" },
    ],
    stripBImages: [
      { src: photos.edgar, alt: "Editorial portrait" },
      { src: photos.interior, alt: "Interior detail" },
      { src: photos.lifestyle, alt: "Lifestyle still" },
      { src: photos.oskar, alt: "Portrait study" },
    ],
    stripADirection: "up",
    stripBDirection: "down",
    imageRadius: "xl",
    stripsMotion: "auto",
    stripsSpeed: "slow",
    stripsPauseOnHover: true,
    stripsGap: "md",
    stripsFadeEdges: true,
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
  },

Add to a page

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

<Hero16 />

Props override matching keys from config:

<Hero16
  width="wide"
  heading="Custom headline"
  stripsMotion="scroll"
/>

Props

Prop Config key Type / values Default / notes
width hero16.width standard | narrow | wide Wrapper max-width
eyebrow hero16.eyebrow string —
heading hero16.heading string —
subheading hero16.subheading string —
primaryCta hero16.primaryCta string —
primaryCtaUrl hero16.primaryCtaUrl string —
secondaryCta hero16.secondaryCta string —
secondaryCtaUrl hero16.secondaryCtaUrl string —
stripAImages hero16.stripAImages Array of { src: LocalImageSource, alt: string } Images for the left vertical strip
stripBImages hero16.stripBImages Array of { src: LocalImageSource, alt: string } Images for the right vertical strip
stripADirection hero16.stripADirection up | down Travel direction for strip A
stripBDirection hero16.stripBDirection up | down Travel direction for strip B (default opposite of A)
imageRadius hero16.imageRadius md | lg | xl | 2xl (no none) Border radius of media
stripsMotion hero16.stripsMotion auto (continuous) | scroll (tied to page scroll) auto loop or scroll-linked vertical strips
stripsSpeed hero16.stripsSpeed slow | normal | fast —
stripsPauseOnHover hero16.stripsPauseOnHover boolean Pause strips on hover/focus
stripsGap hero16.stripsGap sm | md | lg —
stripsFadeEdges hero16.stripsFadeEdges boolean Fade top/bottom of the strip columns
padding hero16.padding none | sm | md | lg | xl Vertical section padding
borderBottom hero16.borderBottom boolean Show a bottom border under the section
borderThickness hero16.borderThickness sm (1px) | md (2px) | lg (4px) —
borderColor hero16.borderColor soft | medium | hard —

Also include: ScrollerImageStripTrack.astro, ScrollerScript.astro. Prefer photos.* — Images.

← Hero versions · Blocks overview · Images