naUISection
Vertical spacing sections.
Base section
na-section adds vertical block padding. Wrap a na-container inside it for the standard page-section pattern.
.na-section - 4rem padding-block
<section class="na-section">
<div class="na-container">
<h2>Section heading</h2>
<p>Section content.</p>
</div>
</section>Size variants
| Class | Token | Default padding-block |
|---|---|---|
na-section-s | --na-space-8 | 2rem |
na-section | --na-space-16 | 4rem |
na-section-l | --na-space-24 | 6rem |
<!-- Tighter section -->
<section class="na-section-s na-bg-gray-50">
<div class="na-container">...</div>
</section>
<!-- Spacious marketing section -->
<section class="na-section-l">
<div class="na-container">...</div>
</section>