Surface
Surface pattern for creating simple containers with background, border, and border-radius. Unlike cards, surfaces don’t include padding or shadows—you add those yourself.
Basic surface
Section titled “Basic surface”<div class="af-surface af-p-md">
<p>Surface with padding added</p>
</div>Surface with padding added
Surface variants
Section titled “Surface variants”Use af-is-* modifier classes to change the surface background:
<div class="af-surface">Default surface (primary)</div>
<div class="af-surface af-is-secondary">Secondary surface</div>
<div class="af-surface af-is-tertiary">Tertiary surface</div>Default surface (primary background)
Secondary surface variant
Tertiary surface variant
When to use Surface vs Card
Section titled “When to use Surface vs Card”- Surface (
af-surface): Simple container without padding or shadow. Use for panels, backgrounds, or when you need full control over spacing. - Card (
af-card): Full component with padding, shadow, and semantic parts. Use for content containers with structure.