Card

A surface for grouping related content using the native <article> element.

Default

<article>
  <p>This is a simple card with some content inside.</p>
</article>

Secondary

Add secondary for a slightly recessed panel, useful for nesting a card inside another card.

<article class="secondary">
  <p>This is a secondary card variant.</p>
</article>

Tertiary

Add tertiary for even more contrast against the page.

<article class="tertiary">
  <p>This is a tertiary card variant.</p>
</article>

Transparent

Add transparent for no background, suitable for overlays and cards with a custom background.

<article class="transparent">
  <p>This is a transparent card variant.</p>
</article>

With header & footer

Add a <header> and/or <footer> for a structured layout with dividers.

<article>
  <header>Header</header>
  Body
  <footer>Footer</footer>
</article>