Section

<section class="ug-section">
  <h2 class="ug-section__title">Section Title</h2>
  <p class="ug-section__subtitle">A brief description of this section and its purpose.</p>
  <p>Section body content goes here. The section provides consistent vertical padding and spacing for page layout.</p>
</section>

<section class="ug-section ug-section--compact">
  <h2 class="ug-section__title">Compact Section</h2>
  <p class="ug-section__subtitle">Reduced padding for tighter layouts.</p>
  <p>This section uses less vertical space while maintaining rhythm alignment.</p>
</section>

<section class="ug-section ug-section--large">
  <h2 class="ug-section__title">Large Section</h2>
  <p class="ug-section__subtitle">Extra vertical padding for prominent sections.</p>
  <p>Use the large variant for hero-like content areas or to create visual breathing room.</p>
</section>

<section class="ug-section ug-section--brown">
  <h2 class="ug-section__title" style="color:#fff">Brown Section</h2>
  <p style="color:#fff">NPS brown background for branded sections.</p>
</section>

<section class="ug-section ug-section--green">
  <h2 class="ug-section__title" style="color:#fff">Green Section</h2>
  <p style="color:#fff">NPS green background for nature-themed content.</p>
</section>

<section class="ug-section ug-section--blue">
  <h2 class="ug-section__title" style="color:#fff">Blue Section</h2>
  <p style="color:#fff">NPS blue background for informational sections.</p>
</section>

<section class="ug-section ug-section--red">
  <h2 class="ug-section__title" style="color:#fff">Red Section</h2>
  <p style="color:#fff">NPS red background for alert or highlight sections.</p>
</section>

<section class="ug-section ug-section--light">
  <h2 class="ug-section__title">Light Section</h2>
  <p>Light background for subtle contrast against a white page.</p>
</section>