← All components

Section

slug: section

Page-level Section wrapper. Every block inside an ACF Flex Content lives inside one of these — configures background color/pattern/image, outer (vertical) padding, inner max-width, and min-height. This preview renders 13 representative variants stacked.

1. Default — no background, default spacing

<Section />

Section content placeholder

Blocks added to this Section render here.

2. backgroundColor — solid navy

<Section backgroundColor="#070C3C" />

Section content placeholder

Blocks added to this Section render here.

3. backgroundColor — paper

<Section backgroundColor="#F5F2EC" />

Section content placeholder

Blocks added to this Section render here.

4. backgroundPattern — frame-1

<Section backgroundPattern="frame-1" backgroundColor="#070C3C" />

Section content placeholder

Blocks added to this Section render here.

5. backgroundPattern — frame-5

<Section backgroundPattern="frame-5" backgroundColor="#070C3C" />

Section content placeholder

Blocks added to this Section render here.

6. backgroundPattern + minHeight — vertically centred

<Section backgroundPattern="frame-3" backgroundColor="#070C3C" minHeight="md" />

Centred inside a 480px-tall Section

Blocks added to this Section render here.

7. outerSpacing — sm (tight vertical padding)

<Section outerSpacing="sm" backgroundColor="#F5F2EC" />

outerSpacing: sm

Blocks added to this Section render here.

8. outerSpacing — xl (generous vertical padding)

<Section outerSpacing="xl" backgroundColor="#F5F2EC" />

outerSpacing: xl

Blocks added to this Section render here.

9. innerSpacing — narrow (720px max-width)

<Section innerSpacing="narrow" backgroundColor="#F5F2EC" />

innerSpacing: narrow

Blocks added to this Section render here.

10. innerSpacing — full (edge-to-edge, no gutter)

<Section innerSpacing="full" backgroundColor="#070C3C" />

innerSpacing: full

Blocks added to this Section render here.

11. minHeight — screen (100svh, hero-style)

<Section minHeight="screen" backgroundPattern="frame-7" backgroundColor="#070C3C" />

Full-viewport hero section

Blocks added to this Section render here.

12. minHeight — custom (200px)

<Section minHeight="custom" minHeightCustom={200} backgroundColor="#F5F2EC" />

Custom 200px min-height

Blocks added to this Section render here.

13. sectionName — sets the section id (URL hash anchor)

<Section sectionName="hero" backgroundColor="#F5F2EC" />

<section id='hero' aria-label='hero'>

Blocks added to this Section render here.

Rendering with default fixtures. Source: apps/web/src/components/blocks/Section.fixtures.ts