ArcaneSectionHeader#
A reusable section header component with an uppercase accent label, large heading text, and muted description.
Basic Usage#
ArcaneSectionHeader(
label: 'Features',
heading: 'Why Choose Us',
description: 'Discover what makes our platform different.',
align: SectionHeaderAlign.center,
)
Properties#
| Property | Type | Default | Description |
|---|---|---|---|
label |
String? |
null |
Uppercase accent label |
heading | String | required | Main heading text |
description |
String? |
null |
Description paragraph |
align |
SectionHeaderAlign |
center |
Text alignment |
labelColor |
String? |
null |
Custom label color |
headingColor |
String? |
null |
Custom heading color |
descriptionColor |
String? |
null |
Custom description color |
descriptionMaxWidth |
String? |
null |
Max width for description |
Alignment#
// Center aligned (default)
ArcaneSectionHeader(
heading: 'Centered Header',
align: SectionHeaderAlign.center,
)
// Left aligned
ArcaneSectionHeader.left(
heading: 'Left Aligned',
description: 'Content flows from the left.',
)
// Right aligned
ArcaneSectionHeader(
heading: 'Right Aligned',
align: SectionHeaderAlign.right,
)
Examples#
Features Section#
ArcaneSectionHeader(
label: 'Features',
heading: 'Everything You Need',
description: 'Powerful tools to help you build faster and smarter.',
align: SectionHeaderAlign.center,
)
Pricing Section#
ArcaneSectionHeader.left(
label: 'Pricing',
heading: 'Simple, Transparent Pricing',
description: 'No hidden fees. No surprise charges. Cancel anytime.',
)
Testimonials#
ArcaneSectionHeader(
label: 'Testimonials',
heading: 'What Our Customers Say',
align: SectionHeaderAlign.center,
)
Related Components#
- ArcaneHeroSection - Full hero sections
- ArcaneHeadline - Standalone headlines