Card

A surface for grouping related content. Add the card class to an <article> element.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/card.css" />

This is a simple card with some content inside.

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

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

This is a secondary card variant.

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

Add tertiary for even more contrast against the page.

This is a tertiary card variant.

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

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

This is a transparent card variant.

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

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

Header

Body

<article class="card">
  <header>Header</header>
  Body
  <footer>Footer</footer>
</article>

Type	Classes / attributes	What it does
Variant	`.secondary` `.tertiary` `.transparent`	Changes the surface