Components
Card Anatomy
Card anatomy is how a card gathers related information — media, header, body, and action — onto a single surface that the user reads as one self-contained unit.
Definition
A card is a container that gathers related pieces of information onto one surface. Usually an image or piece of media sits at the top, followed by a header with the title, body text with the description, and finally an action like a button or link. Because a card bundles all these fragments into a single surface, the user reads one card as one complete, self-contained unit. How you handle the inner padding, the gap between pieces, the corner radius, and the shadow is what decides whether the same content ends up looking like a plain, restrained card or a rich, showy one.
Why does it matter?
Cards matter because they make the user perceive scattered information as a single chunk. When a title, an image, and a button sit apart from one another, the user has to guess for themselves whether they belong together; place them inside one card and they instantly read as related, no explanation needed. Cards are especially common when dozens of them repeat inside a list or grid. If the padding, gap, or radius drifts even slightly from card to card, the moment they sit side by side they look subtly misaligned and the whole thing feels messy. When every card follows the same rules, though, even a long row of them keeps a calm, orderly rhythm. That is why consistency of values matters so much for cards.
Common mistakes
- Giving each card a different inner padding. When some cards feel generous and others feel cramped, lining several of them up in a list makes the heights and spacing look uneven, and the whole layout turns cluttered.
- Cramming too much information and too many actions into one card. A card should be a single unit, but once it holds several buttons and the content runs long, the user struggles to tell at a glance what the card is about or what they are supposed to do.
- Wrapping the whole card in both a heavy border and a dark shadow at once. Stacking two boundary-making devices makes the card look heavy, and when several sit in a list the screen fills up with cramped-looking boxes. Using just one of them, softly, works better.
Practical tips
- Lock the inner padding and the gap between elements to a fixed spacing scale. When the values are unified, several cards can sit side by side without drifting out of line and stay neatly aligned. This works even better if you build it as a reusable component.
- Tune a card's personality with radius and shadow. A sharp, shadowless card reads as plain and serious, while a rounded card with a faint shadow feels soft and floating. Pick one combination and keep it consistent across the whole product.
- Order the information inside a card from the top down as media, title, body, then action, so the user's eye flows naturally from top to bottom. Keep this order the same in every card and the user never has to relearn where to look.