Section

<section> + <div>Full-width page band with its own background and spacing.

This page covers the Section block — when to use it and how it fits into your page layout.

What it does

Section creates a full-width area on your page. Think of it as a horizontal band that spans the entire viewport — perfect for heroes, feature blocks, testimonials, or any area that needs its own background and spacing.

Every Section automatically includes a Container inside it to keep your content at a readable width.

When to use

• Page sections — hero, features, testimonials, CTA areas
• Full-width backgrounds — areas that span the entire viewport
• Content grouping — logical divisions of your page

Included container

Section automatically nests a Container to constrain content width. You can remove or customize this container in the editor.

Common mistake

Don't nest a Section inside another Section. A single Section can contain multiple Container blocks if you need separate constrained areas — or use Div blocks for subdivisions that don't need width constraints.

HTML output

Section renders a <section> element with an alignfull class:

<section class="alignfull" data-unbk-section>
  <div data-unbk-container>
    <!-- Your content -->
  </div>
</section>

Attribute	Value	Purpose
class	alignfull	Makes the section full-width
data-unbk-section	—	Identifies Unblock sections

Preset styles

The data-unbk-section attribute applies the following default CSS:

[data-unbk-section] {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Unblock also applies box-sizing: border-box to all elements inside a Section (including ::before and ::after pseudo-elements).

You can override these defaults with your own selectors.

Next steps

• Container — the constrained wrapper inside sections
• Div — generic grouping without semantic meaning