ArcaneSection#

A semantic section component that wraps content in an HTML <section> element with built-in spacing and styling.

Basic Usage#

ArcaneSection(
  children: [
    ArcaneHeading(text: 'Features'),
    ArcaneParagraph(text: 'Our amazing features...'),
  ],
)

Properties#

Spacing Options#

// No spacing
ArcaneSection(
  spacing: SectionSpacing.none,
  children: [...],
)

// Small spacing
ArcaneSection(
  spacing: SectionSpacing.sm,
  children: [...],
)

// Medium spacing
ArcaneSection(
  spacing: SectionSpacing.md,
  children: [...],
)

// Large spacing (default)
ArcaneSection(
  spacing: SectionSpacing.lg,
  children: [...],
)

// Extra large spacing
ArcaneSection(
  spacing: SectionSpacing.xl,
  children: [...],
)

With Background#

ArcaneSection(
  background: Background.surface,
  children: [
    ArcaneContainer(
      children: [
        ArcaneHeading(text: 'Highlighted Section'),
        ArcaneParagraph(text: 'Content on a surface background.'),
      ],
    ),
  ],
)

With Anchor ID#

ArcaneSection(
  id: 'features',
  children: [
    ArcaneContainer(
      children: [
        ArcaneHeading(text: 'Features'),
        // Now linkable via #features
      ],
    ),
  ],
)

Examples#

Landing Page Sections#

ArcaneColumn(
  children: [
    // Hero Section
    ArcaneSection(
      spacing: SectionSpacing.xl,
      id: 'hero',
      children: [
        ArcaneContainer(
          styles: const ArcaneStyleData(
            textAlign: TextAlign.center,
          ),
          children: [
            ArcaneHeadline(text: 'Build Faster'),
            ArcaneSubheadline(text: 'Modern UI for Jaspr'),
            ArcaneRow(
              mainAxisAlignment: JustifyContent.center,
              gap: Gap.md,
              children: [
                ArcaneButton.primary(label: 'Get Started', onPressed: () {}),
                ArcaneButton.ghost(label: 'Learn More', onPressed: () {}),
              ],
            ),
          ],
        ),
      ],
    ),

    // Features Section
    ArcaneSection(
      id: 'features',
      background: Background.surface,
      children: [
        ArcaneContainer(
          children: [
            ArcaneHeading(text: 'Features'),
            ArcaneDiv(
              styles: const ArcaneStyleData(
                display: Display.grid,
                gridTemplateColumns: 'repeat(3, 1fr)',
                gap: Gap.lg,
              ),
              children: [
                ArcaneFeatureCard(title: 'Fast', icon: '⚡'),
                ArcaneFeatureCard(title: 'Flexible', icon: '🔧'),
                ArcaneFeatureCard(title: 'Beautiful', icon: '✨'),
              ],
            ),
          ],
        ),
      ],
    ),

    // Testimonials Section
    ArcaneSection(
      id: 'testimonials',
      children: [
        ArcaneContainer(
          children: [
            ArcaneHeading(text: 'What People Say'),
            // Testimonial cards...
          ],
        ),
      ],
    ),
  ],
)

Alternating Backgrounds#

ArcaneColumn(
  children: [
    ArcaneSection(
      children: [
        ArcaneContainer(children: [/* Content */]),
      ],
    ),
    ArcaneSection(
      background: Background.surface,
      children: [
        ArcaneContainer(children: [/* Content */]),
      ],
    ),
    ArcaneSection(
      children: [
        ArcaneContainer(children: [/* Content */]),
      ],
    ),
    ArcaneSection(
      background: Background.surface,
      children: [
        ArcaneContainer(children: [/* Content */]),
      ],
    ),
  ],
)

Documentation Page#

ArcaneColumn(
  children: [
    ArcaneSection(
      id: 'overview',
      spacing: SectionSpacing.md,
      children: [
        ArcaneHeading(text: 'Overview'),
        ArcaneParagraph(text: '...'),
      ],
    ),
    ArcaneSection(
      id: 'installation',
      spacing: SectionSpacing.md,
      children: [
        ArcaneHeading(text: 'Installation'),
        ArcaneCodeSnippet(code: 'dart pub add arcane_jaspr'),
      ],
    ),
    ArcaneSection(
      id: 'usage',
      spacing: SectionSpacing.md,
      children: [
        ArcaneHeading(text: 'Usage'),
        // Usage examples...
      ],
    ),
  ],
)

CTA Section#

ArcaneSection(
  spacing: SectionSpacing.xl,
  styles: const ArcaneStyleData(
    background: Background.accent,
    textAlign: TextAlign.center,
  ),
  children: [
    ArcaneContainer(
      maxWidth: ContainerMaxWidth.md,
      children: [
        ArcaneHeading(text: 'Ready to get started?'),
        ArcaneParagraph(text: 'Join thousands of developers using Arcane.'),
        ArcaneButton(
          label: 'Start Free Trial',
          onPressed: () {},
          styles: const ArcaneStyleData(
            marginTop: Spacing.lg,
          ),
        ),
      ],
    ),
  ],
)

Related Components#

• ArcaneDiv - Generic layout div
• ArcaneContainer - Centered container
• ArcaneHeroSection - Hero section variant