ContentSection
Add text, lists, or simple content anywhere. Choose your width, spacing, and background.
View showcase
Section Components - Build Pages That Convert
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.
What Are Section Components?
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.
Available Section Components
Hero
Five powerful hero variants: service-first, image-right, centered, form, and form-minimal.
View showcase
Timeline
Display business milestones with three layout variants: vertical, horizontal, and compact.
View showcase
CTA Block
High-converting call-to-action sections with three color variants and flexible layouts.
View showcase
Features Grid
Showcase features with icons, headings, and descriptions in flexible grid layouts.
View showcase
Stats
Display key statistics and achievements with row or grid layouts.
View showcase
Testimonials
Customer testimonials with star ratings, photos, and Review schema markup.
View showcase
Pricing Table
SaaS-style pricing tables with badges, highlights, tooltips, and responsive design.
View showcase
Comparison Sections
Before/after and problem/solution comparisons following StoryBrand framework.
View showcase
How to Use Section Components
1. Import the Component
import Timeline from '@theme/components/sections/Timeline.astro';2. Add to Your Page
<Timeline
heading="Our Story"
layout="vertical"
background="default"
/>3. Customize Props
Each component accepts props for customization. Check the component's showcase page for all available options.
Explore Section Components
Click on any component above to see live examples, code snippets, and usage instructions.