Section & Surface
Section
Section titled “Section”Semantic section containers with vertical spacing. Use <section> elements to divide page content into logical blocks.
| Class | Spacing |
|---|---|
af-section-sm | var(--af-space-4) |
af-section | var(--af-space-6) |
af-section-lg | var(--af-space-8) |
Default Section
Standard vertical spacing (space-6).
Small Section
Compact vertical spacing (space-4).
Large Section
Generous vertical spacing (space-8).
<section class="af-section">
<h2>Default Section</h2>
<p>Standard vertical spacing.</p>
</section>
<section class="af-section-sm">
<h2>Small Section</h2>
<p>Compact vertical spacing.</p>
</section>
<section class="af-section-lg">
<h2>Large Section</h2>
<p>Generous vertical spacing.</p>
</section>Section only sets padding-block. Add your own inline padding, background, or border as needed.
Surface
Section titled “Surface”A container with background color and border. No padding or shadow by default - add those with utility classes.
| Class | Background |
|---|---|
af-surface | --af-color-surface-primary |
af-surface af-is-secondary | --af-color-surface-secondary |
af-surface af-is-tertiary | --af-color-surface-tertiary |
Primary surface
Secondary surface
Tertiary surface
<div class="af-surface af-p-md">Primary surface</div>
<div class="af-surface af-is-secondary af-p-md">Secondary surface</div>
<div class="af-surface af-is-tertiary af-p-md">Tertiary surface</div>Surface vs Card
Section titled “Surface vs Card”- Surface (
af-surface) - Minimal container. No padding or shadow. Use for panels, backgrounds, or when you need full control. - Card (
af-card) - Full component with built-in padding, shadow, and semantic parts. Use for structured content blocks.
CSS reference
Section titled “CSS reference”/* Section */
.af-section { padding-block: var(--af-space-6); }
.af-section-sm { padding-block: var(--af-space-4); }
.af-section-lg { padding-block: var(--af-space-8); }
/_ Surface _/
.af-surface {
background: var(--af-color-surface-primary);
border: var(--af-border-width) solid var(--af-color-border);
border-radius: var(--af-radius);
}
.af-surface.af-is-secondary { background: var(--af-color-surface-secondary); }
.af-surface.af-is-tertiary { background: var(--af-color-surface-tertiary); }