ContentSection
Add text, lists, or simple content anywhere. Choose your width, spacing, and background.
Large, impactful sections that make your pages pop. From heroes to testimonials, each component is self-contained, customizable, and ready to drop into any page.
Section components are large, reusable blocks that you can add to any page. Think timelines, testimonials, pricing tables—the kind of sections that make pages engaging and memorable.
Each component is fully styled, responsive, dark-mode ready, and accessible. Just import, configure, and use.
Add text, lists, or simple content anywhere. Choose your width, spacing, and background.
Five powerful hero variants: service-first, image-right, centered, form, and form-minimal.
Display business milestones with three layout variants: vertical, horizontal, and compact.
High-converting call-to-action sections with three color variants and flexible layouts.
Showcase features with icons, headings, and descriptions in flexible grid layouts.
Display key statistics and achievements with row or grid layouts.
Customer testimonials with star ratings, photos, and Review schema markup.
SaaS-style pricing tables with badges, highlights, tooltips, and responsive design.
Before/after and problem/solution comparisons following StoryBrand framework.
import Timeline from '@theme/components/sections/Timeline.astro'; <Timeline
heading="Our Story"
layout="vertical"
background="default"
/> Each component accepts props for customization. Check the component's showcase page for all available options.
Click on any component above to see live examples, code snippets, and usage instructions.