Default Background
Standard section with centered text.
Section content goes here
Muted Background
Subtle contrast for alternating sections.
Section content goes here
Card Background
Bordered section with card styling.
Section content goes here
Primary Background
High-contrast section for CTAs.
Section content goes here
Left Aligned
For content that reads better left-aligned.
Section content goes here
Props
| Prop | Type | Description |
|---|---|---|
| title | ReactNode | Section heading |
| subtitle | ReactNode | Supporting text below the title |
| background | "default" | "muted" | "card" | "primary" | Background style (default) |
| align | "left" | "center" | Text alignment (default center) |
| children | ReactNode | Section content |
| className | string | Additional classes on the root element |
Usage
<Section
title="Features"
subtitle="Everything you need."
background="muted"
>
<FeatureSection features={features} />
</Section>