Back to site

Feature Slider

Carousel of feature cards, ideal for showcasing key reasons or benefits.

Product tour

Show the product one moment at a time

Move through the key workflows without forcing the page into a long series of repeated split sections.

---
import FeatureSlider from "@features/feature-slider/FeatureSlider.astro";
---

<FeatureSlider
backgroundColor="surface" colorScheme="inherit" eyebrow="Product tour" heading="Show the product one moment at a time" slides={
  [
    {
      "eyebrow": "Setup",
      "title": "Configure sections fast",
      "description": "Start with documented blocks, then swap content, styling, and layout details to match the project.",
      "imageSource": "/src/assets/images/component-docs/castle.jpg",
      "imageAlt": "Large stone building during golden hour",
      "minSplitWidth": 720
    },
    {
      "eyebrow": "Editing",
      "title": "Keep changes visual for editors",
      "description": "Content teams can work slide by slide instead of digging through nested page markup.",
      "imageSource": "/src/assets/images/component-docs/quiet-street.jpg",
      "imageAlt": "Quiet street with storefronts and warm light",
      "minSplitWidth": 720
    },
    {
      "eyebrow": "Shipping",
      "title": "Launch cleaner pages",
      "description": "Replace multiple repetitive sections with one contained story arc that stays easy to scan.",
      "imageSource": "/src/assets/images/component-docs/sunset.jpg",
      "imageAlt": "Sunset landscape with soft light",
      "minSplitWidth": 720
    }
  ]
} subtext="Move through the key workflows without forcing the page into a long series of repeated split sections."
/>
---
blocks:
  _component: page-sections/features/feature-slider
  eyebrow: Product tour
  heading: Show the product one moment at a time
  subtext: Move through the key workflows without forcing the page into a long series of repeated split sections.
  slides:
    - eyebrow: Setup
      title: Configure sections fast
      description: Start with documented blocks, then swap content, styling, and layout details to match the project.
      imageSource: /src/assets/images/component-docs/castle.jpg
      imageAlt: Large stone building during golden hour
      minSplitWidth: 720
    - eyebrow: Editing
      title: Keep changes visual for editors
      description: Content teams can work slide by slide instead of digging through nested page markup.
      imageSource: /src/assets/images/component-docs/quiet-street.jpg
      imageAlt: Quiet street with storefronts and warm light
      minSplitWidth: 720
    - eyebrow: Shipping
      title: Launch cleaner pages
      description: Replace multiple repetitive sections with one contained story arc that stays easy to scan.
      imageSource: /src/assets/images/component-docs/sunset.jpg
      imageAlt: Sunset landscape with soft light
      minSplitWidth: 720
  colorScheme: inherit
  backgroundColor: surface
---

Overview

Use Feature Slider when a single static feature block feels too cramped. It keeps related highlights in one section, lets each slide pair copy with a supporting image, and avoids stacking multiple near-identical split layouts on the same page.

Properties

slides array | default: array

Structured feature slides rendered inside the carousel.

Item Properties:

_component string | default: page-sections/features/feature-slider/feature-slider-item

eyebrow string

Optional eyebrow text displayed above the title.

title string | default: Slide title

Heading text shown on the slide.

description string | default: Short description for this slide.

Supporting body copy shown on the slide.

imageSource string | default: /src/assets/images/component-docs/sunset.jpg

Image shown on the side of the slide.

imageAlt string | default: Slide image alt text

Alt text describing the slide image.

minSplitWidth number | default: 0

Container width (in px) before the split stacks vertically.

colorScheme enum | default: inherit

Color scheme theme applied to the section wrapper.

Accepted values:
  • inherit
  • light
  • dark

backgroundColor enum | default: base

Background color for the section.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight