Skip to content

<section>

The <section> element groups thematically related content. Semanticus adds a bottom margin via --spacing to separate sections visually.

Basic Usage

live preview
editable html
<section>
  <hgroup>
    <h2>Introduction</h2>
    <p>Sections group thematically related content. Each section gets a bottom margin via <code>--spacing-vertical</code>.</p>
  </hgroup>
</section>

<section>
  <hgroup>
    <h2>Features</h2>
    <p>Use multiple sections to structure long-form content like articles, landing pages, or documentation.</p>
  </hgroup>
</section>