Skip to content
BaseLayer Themes

Docs

Hero 15

1/3 + 2/3 — copy left, center-focused image slider

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.

Get in touchView my work
Portrait in soft light
Interior detail
Lifestyle still
Editorial portrait
Architectural study

File: src/blocks/hero/Hero15.astro

Two-column hero: left copy; right SpotlightImageSlider (Keen Slider) with a taller active/center slide.

Mobile: slider stacks above the copy and goes full-bleed.

Config (blocks.ts → hero15)

hero15: {
    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/",
    images: [
      { src: photos.karla, alt: "Portrait in soft light" },
      { src: photos.interior, alt: "Interior detail" },
      { src: photos.lifestyle, alt: "Lifestyle still" },
      { src: photos.edgar, alt: "Editorial portrait" },
      { src: photos.alexander, alt: "Architectural study" },
    ],
    imageRadius: "2xl",
    sliderAutoplay: false,
    sliderSpeed: "normal",
    showDots: true,
    sliderPauseOnHover: true,
    padding: "lg",
    borderBottom: false,
    borderThickness: "sm",
    borderColor: "soft",
  },

Add to a page

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

<Hero15 />

Props override matching keys from config:

<Hero15
  width="wide"
  heading="Custom headline"
  sliderSpeed="fast"
/>

Props

Prop Config key Type / values Default / notes
width hero15.width standard | narrow | wide Wrapper max-width
eyebrow hero15.eyebrow string —
heading hero15.heading string —
subheading hero15.subheading string —
primaryCta hero15.primaryCta string —
primaryCtaUrl hero15.primaryCtaUrl string —
secondaryCta hero15.secondaryCta string —
secondaryCtaUrl hero15.secondaryCtaUrl string —
images hero15.images Array of { src: LocalImageSource, alt: string } Slider / media images
imageRadius hero15.imageRadius md | lg | xl | 2xl (no none) Border radius of media
sliderAutoplay hero15.sliderAutoplay boolean Auto-advance the image slider
sliderSpeed hero15.sliderSpeed slow (6s) | normal (4s) | fast (2.5s) —
showDots hero15.showDots boolean Pagination dots under the slider
sliderPauseOnHover hero15.sliderPauseOnHover boolean Pause slider autoplay on hover/focus
padding hero15.padding none | sm | md | lg | xl Vertical section padding
borderBottom hero15.borderBottom boolean Show a bottom border under the section
borderThickness hero15.borderThickness sm (1px) | md (2px) | lg (4px) —
borderColor hero15.borderColor soft | medium | hard —

Also include: SpotlightImageSlider.astro (Keen Slider). Prefer photos.* — Images.

← Hero versions · Blocks overview · Images