Layout & structure

Card

Group related content on a surface with system border, radius, and padding.

Preview

Structured Editorial

[ Card ]

A surface with system styling

Border, radius, and padding all come from the tokens.

HTML

<div class="sx-card">
  <p class="sx-eyebrow">[ Card ]</p>
  <h4 class="sx-feature-title">A surface with system styling</h4>
  <p class="sx-body">Border, radius, and padding all come from the tokens.</p>
</div>