Layout

Section

A full-width band built with the Flexbox layout element — direction, gap, alignment and a full-bleed background, all in one element.

Live demo

See it in action

Full-width band

A section, built with Flexbox.

A section-tag Flexbox: the background runs edge to edge while the content stays contained to the site width. Set direction, gap, padding and a band colour per section.

Band colour

Switch the band colour per section.

Alternate light / dark / tinted bands to build rhythm down the page.

Row or columnChildren flow side by side, or stack — one switch.
Gap & alignmentControl spacing and alignment on both axes.

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox upw-section upw-band-surface fw-flex fw-flex-column fw-full-bleed fw-collapse">
	<div class="heading hd-802e7ba5 heading-h2 heading--space-tight mb-4">
		<p class="heading-overline heading-overline--kicker text-center">Full-width band</p>
		<h2 class="heading-title text-center">A section, built with Flexbox.</h2>
		<p class="heading-subtitle text-center">A section-tag Flexbox: the background runs edge to edge while the content stays contained to the site width. Set direction, gap, padding and a band colour per section.</p>
	</div>
</section>

To learn more about the Section shortcode, please check out the online manual here.