CSS card — cheatsheet
One screen of recall. The card project, distilled to what you reach for.
The exact property/value pairs that give the card its depth and spacing.
Prerequisites
None — this is a recall surface.
- padding: 24px
- Space inside the border, between content and edge.
- border-radius: 16px
- Rounds all four corners by 16px.
- box-shadow: 0 12px 40px rgb(0 0 0 / .45)
- Soft elevation: no x, 12px down, 40px blur.
- box-sizing: border-box
- width includes padding + border — set it globally.
- max-width: 320px
- Caps the card so it never spans the full row.
Reference
Full CSS cheatsheet book
Layout primitives, modern colour, container queries — the printable subject sheet.
Concepts covered · 1
More like this
HTML Headings
h1 through h6 are the page’s table of contents. Use them for structure, never for size — that’s what CSS is for.
HTML Headings
h1–h6 are instances of HTMLHeadingElement. They take no special attributes — only the global set and ARIA — but there’s real depth in how they form the document outline and what you can do with them from JavaScript.
Liked this one?
Pass it on
Discussion
Be the first to ask
Your questions stay private with the team. We can pin answers to share with everyone.
Sign in to ask a question privately on this tutorial.
Sign inNo pinned answers yet for this tutorial.