Card Systems
A taxonomy of card types with rules for content density, action placement, and grid behaviour.
What a card is
A card is a contained unit of content that links to a destination or triggers an action. The containment is semantic, not merely visual — a card tells the user that everything inside it belongs together and that the unit as a whole is interactive. If only part of a card is interactive, it is not a card — it is a panel with interactive elements inside it.
The three card types
Editorial cards surface content for discovery: title, description, metadata, and a link. Action cards present a choice or trigger: title, description, primary action button. Data cards expose a metric or status: label, value, trend or context. Each type has different density requirements and should not be mixed in the same grid without clear visual differentiation.
Grid behaviour
Card grids should define a minimum card width rather than a fixed column count. A three-column grid that reflows to two columns at 900px and one column at 600px is more resilient than a grid that collapses at arbitrary breakpoints. Use CSS grid with auto-fill or auto-fit to achieve this without JavaScript.
Action placement
Primary actions on editorial cards should be the entire card surface (onclick on the article element, not a nested anchor). This avoids nested interactive element accessibility issues. Secondary actions (save, share) belong in a card footer, visually separated from the card body.
Content density rules
Do not truncate card content with ellipsis unless the grid reflows to more than four columns. At typical card widths, two to four lines of description text fit comfortably without truncation. Truncation saves space at the cost of information — only trade this when the grid genuinely cannot accommodate longer content.
Field Notes in your inbox
Practical observations on design systems, component architecture, and UX methodology. No promotional content. Published when there is something worth saying.