Section

A full-width page band with block padding derived from rhythm tokens. Wrap content in a __inner element to centre it at --container width with gutter padding. Use surface modifiers for alternating backgrounds and spacing modifiers for vertical rhythm.

Default section with header

<section class="ln-section ln-section--space-lg border mb-3">
  <div class="ln-section__inner">
    <div class="ln-section__header">
      <p class="ln-section__eyebrow">Features</p>
      <h2 class="ln-section__title">Built for the grid</h2>
      <p class="ln-section__lead">Every measurement lands on the 8px grid.</p>
    </div>
    <p>Section body content.</p>
  </div>
</section>

<section class="ln-section ln-section--surface-sunken ln-section--space-lg border">
  <div class="ln-section__inner">
    <p>Content on a sunken surface background.</p>
  </div>
</section>

Section body content.

Content on a sunken surface background.

Centre and inverse surface

<section class="ln-section ln-section--space-xl ln-section--surface-inverse ln-section--center border">
  <div class="ln-section__inner">
    <h2 class="ln-section__title">Hero band</h2>
    <p class="ln-section__lead">Full-width, centred, inverse surface.</p>
  </div>
</section>

Hero band

Full-width, centred, inverse surface.

Bordered and narrow sections

The --bordered modifier adds a top border. The --narrow modifier constrains the inner element to the prose measure width.

<section class="ln-section ln-section--space-lg border mb-3">
  <div class="ln-section__inner">
    <p>Section with a top border separator.</p>
  </div>
</section>

<section class="ln-section ln-section--narrow ln-section--surface-sunken ln-section--space-lg border">
  <div class="ln-section__inner">
    <p>Narrow section — inner constrained to prose measure width.</p>
  </div>
</section>

Section with a top border separator.

Narrow section — inner constrained to prose measure width.

Reference

Class	Description	Responsive
`.ln-section`	Full-width band with block padding	No
`.ln-section__inner`	Content wrapper — centres and constrains children at container width with gutter padding	No
`.ln-section--narrow`	Constrain inner to prose measure width	No
`.ln-section--wide`	Constrain inner to wide container width	No
`.ln-section--space-lg`	48px block padding	No
`.ln-section--space-xl`	72px block padding	No
`.ln-section--space-2xl`	96px block padding	No
`.ln-section--space-3xl`	144px block padding	No
`.ln-section--surface-sunken`	Sunken background surface	No
`.ln-section--surface-raised`	Raised background surface	No
`.ln-section--surface-inverse`	Inverse (dark) background with light text	No
`.ln-section--center`	Centre-align text content	No
`.ln-section__header`	Section header wrapper with bottom spacing	No
`.ln-section__eyebrow`	Uppercase label above the title	No
`.ln-section__title`	Section heading	No
`.ln-section__lead`	Subtitle or lead paragraph	No