Skip to content
Airframe

Section

Section pattern for consistent vertical spacing between page sections. Adds padding-block (top and bottom padding) to create visual separation.

Basic section

Section titled “Basic section”
<section class="af-section">
  <h2>Section Title</h2>
  <p>Section content</p>
</section>

Section sizes & variants

Section titled “Section sizes & variants”
<section class="af-section-sm">Small spacing</section>
<section class="af-section">Default spacing</section>
<section class="af-section-lg">Large spacing</section>
<section class="af-section-hero">Hero (extra padding)</section>
<section class="af-section-alt">Alternate background</section>
<section class="af-section-narrow">Narrow container</section>

Variants

Section titled “Variants”
  • af-section-hero - Extra padding for hero sections
  • af-section-alt - Alternate background (--af-color-surface-primary)
  • af-section-narrow - Constrains child .af-container to --af-container-max-w-md

Use cases

Section titled “Use cases”
  • Page sections with consistent spacing
  • Content areas that need vertical rhythm
  • Separating major content blocks
Section titled “Related”