A card in CSS

A card is a box with a shadow until you decide how it behaves when it is tall.

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: white;
  overflow: clip;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  transition: box-shadow 150ms ease, translate 150ms ease;
}

.card:hover {
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.1);
  translate: 0 -2px;
}

.card img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

How it works

1. A grid with 1fr in the middle pins the footer to the bottom.
2. overflow: clip keeps a corner radius honest around an image.
3. The hover shadow moves; the layout does not, so nothing reflows.

Keywords and builtins used here

• background
• border
• card
• display
• gap
• grid
• ms
• overflow
• padding
• px
• rem
• rgb
• transition
• translate

The run, in numbers

Lines

19

Characters to type

430

Tokens

121

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 85 seconds.

Type this snippet

Step 1 of 4 in Surfaces, step 3 of 13 in Styling components.

← Previous Next →