section

Vertical padding wrapper with optional background. Compose with container() for full-width background with constrained content.

section({
  eyebrow:  'Why Pulse',
  title:    'Built for speed.',
  subtitle: 'Every page scores 100 on Lighthouse by design.',
  align:    'center',
  variant:  'alt',
  content:  container({ size: 'lg', content: featureGrid }),
})

Diagonal variant

The diagonal variant clips the bottom edge to a slanted angle, creating a layered stacking effect when multiple sections follow each other. The section after it should start with no top gap.

section({ variant: 'diagonal', title: 'Slanted edge', align: 'center', content })

Paper variant

The paper variant applies a subtle off-white background and slight inset box shadow — useful for content sections that need to feel warmer and tactile.

section({ variant: 'paper', title: 'Warm and tactile', align: 'center', content })

Spotlight variant

The spotlight variant adds a radial gradient light source at the top centre — gives the section a dramatic, focused feeling.

section({ variant: 'spotlight', title: 'Dramatically focused', align: 'center', content })