Trigger downstream tools when tasks close so work keeps moving without manual pings.
Feature Slider
Carousel of feature cards, ideal for showcasing key reasons or benefits.
Automation
Automated handoffs
Visibility
Insight dashboards
Pull status from every project into a single adaptive view for leadership.
Control
Granular permissions
Use roles to decide exactly who can edit briefs, roadmaps, and approvals.
---
import FeatureSlider from "@features/feature-slider/FeatureSlider.astro";
import FeatureSliderItem from "@features/feature-slider/FeatureSliderItem.astro";
---
<FeatureSlider
backgroundColor="base" colorScheme="inherit" maxContentWidth="xl" paddingHorizontal="lg" paddingVertical="4xl" sectionLabel="Feature Slider" slides={
[
{
"_component": "page-sections/features/feature-slider/feature-slider-item",
"eyebrow": "Automation",
"title": "Automated handoffs",
"description": "Trigger downstream tools when tasks close so work keeps moving without manual pings.",
"imageSource": "/src/assets/images/component-docs/dunedin-cliff.jpg",
"imageAlt": "Team reviewing an automated workflow"
},
{
"_component": "page-sections/features/feature-slider/feature-slider-item",
"eyebrow": "Visibility",
"title": "Insight dashboards",
"description": "Pull status from every project into a single adaptive view for leadership.",
"imageSource": "/src/assets/images/component-docs/quiet-street.jpg",
"imageAlt": "Dashboards summarizing project progress"
},
{
"_component": "page-sections/features/feature-slider/feature-slider-item",
"eyebrow": "Control",
"title": "Granular permissions",
"description": "Use roles to decide exactly who can edit briefs, roadmaps, and approvals.",
"imageSource": "/src/assets/images/component-docs/castle.jpg",
"imageAlt": "Secure permissions protecting team workflows"
}
]
}
/>---
blocks:
_component: page-sections/features/feature-slider
sectionLabel: Feature Slider
maxContentWidth: xl
paddingHorizontal: lg
paddingVertical: 4xl
colorScheme: inherit
backgroundColor: base
slides:
- _component: page-sections/features/feature-slider/feature-slider-item
eyebrow: Automation
title: Automated handoffs
description: Trigger downstream tools when tasks close so work keeps moving without manual pings.
imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
imageAlt: Team reviewing an automated workflow
- _component: page-sections/features/feature-slider/feature-slider-item
eyebrow: Visibility
title: Insight dashboards
description: Pull status from every project into a single adaptive view for leadership.
imageSource: /src/assets/images/component-docs/quiet-street.jpg
imageAlt: Dashboards summarizing project progress
- _component: page-sections/features/feature-slider/feature-slider-item
eyebrow: Control
title: Granular permissions
description: Use roles to decide exactly who can edit briefs, roadmaps, and approvals.
imageSource: /src/assets/images/component-docs/castle.jpg
imageAlt: Secure permissions protecting team workflows
---Overview #
Use Feature Slider when you want to spotlight several features in a focused, sequential way. Each slide pairs a heading, supporting copy, and an image in a split layout, giving readers room to digest one capability before swiping to the next.
Properties #
sectionLabel string
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.