Card | GlassMarshmallow

On this page

Example
In a grid
The whole card as a link
Accessibility

Example

Basic plan

To get started: a one-page website with a contact form.

html

<div class="gm-card" style="max-width: 360px">
  <h3 style="margin: 0 0 8px">Basic plan</h3>
  <p class="gm-muted">To get started: a one-page website with a contact form.</p>
  <button type="button" class="gm-btn gm-btn--sm">See details</button>
</div>

In a grid

With the grid (.gm-grid--auto), as many cards per row as fit.

Fast

Ready in minutes.

Light and dark

Both modes, built in.

Accessible

WCAG 2.2 AA and AAA.

html

<div class="gm-grid gm-grid--auto gm-gap-sm" style="--gm-grid-min: 200px">
  <div class="gm-card"><i class="gmi gmi-stars" aria-hidden="true" style="font-size: 1.5rem"></i><h3 style="margin: 8px 0 4px">Fast</h3><p class="gm-muted">Ready in minutes.</p></div>
  <div class="gm-card"><i class="gmi gmi-circle-half" aria-hidden="true" style="font-size: 1.5rem"></i><h3 style="margin: 8px 0 4px">Light and dark</h3><p class="gm-muted">Both modes, built in.</p></div>
  <div class="gm-card"><i class="gmi gmi-heart" aria-hidden="true" style="font-size: 1.5rem"></i><h3 style="margin: 8px 0 4px">Accessible</h3><p class="gm-muted">WCAG 2.2 AA and AAA.</p></div>
</div>

The whole card as a link

If the whole card leads to another page, make the card the <a>. That avoids several repeated links.

Palette generator

Create an accessible palette from one color.

html

<a class="gm-card" href="#" style="display: block; max-width: 360px; color: inherit">
  <strong>Palette generator</strong>
  <p class="gm-muted" style="margin: 4px 0 0">Create an accessible palette from one color.</p>
</a>

Accessibility

The border and shadow separate the card from the background; important content does not depend on them.
If the card is a link, its text must say where it goes (WCAG 2.4.4).
The last element in the card has no bottom margin, so the padding is the same top and bottom.