Skip to content
Airframe

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 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>

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.
Section titled “Related”