Anti-pattern: card walls as a substitute for page architecture
Repeated equal cards flatten hierarchy and make the reader do the design work. Cards are acceptable only for genuinely modular, comparable objects; for stories, processes, lessons, brand intros and explanations use editorial, timeline, proof-ladder or split compositions. Includes the four-question check and the replacement decision list.
Overview
Symptom: A page made of equal-height boxes — same icon, heading, sentence and button in each — under a centred hero; feature grids, "three columns" sections, testimonial card rows, dashboard-style panels wrapped around marketing copy.
Why it fails: Equal framing signals equal importance, so nothing is important. Narrative movement disappears: a process becomes six unrelated boxes; a story becomes a grid. The reader has to infer what matters because the page refused to create hierarchy. It is also the single strongest visual tell of unedited generated output, because repeated containers are the easiest thing to generate.
Cards are acceptable for: catalogue items, products, articles, resources, saved objects, search results, pricing tiers, and dashboards where users compare independent records.
Cards are weak for: storytelling, lessons, brand introductions, emotional positioning, immersive homepages, step-by-step guidance, process explanation, anything that should read as a narrative.
Implementation
- Before using cards, answer four questions in the design note:
- Are these items independent objects?
- Does the user need to compare them side by side?
- Would a list, timeline, story section or guided flow explain this better?
- Is the card being used because it is correct, or because it is easy? If the honest answer to 4 is "because it is easy", do not use cards.
- Classify the content, then pick the replacement:
| The content is… | Use instead |
|---|---|
| a story | editorial scroll with section rhythm |
| a process | timeline / stepper / checklist spine |
| a comparison | comparison table or side-by-side proof |
| a catalogue | cards are fine — with real thumbnails and real metadata |
| a demo | interactive visual or annotated demo section |
| a lesson | guided room with checkpoints |
- Respect the card budget for the site type. Software product: at most one card section (a real pricing set). Portfolio, agency, learning, non-profit, food, playful: zero card walls. Local business and regulated services: at most one, and only if the services are genuinely discrete. (Budgets come from the site-type atlas; see merge notes on
web-hero-composition-selection.) - When a card section is justified, differentiate it: real images or data per card, varied spans if importance differs, no decorative icons, no identical body copy lengths that reveal templating.
- Replace the rest with non-card compositions from
lesson-non-card-content-layouts: editorial spine, timeline spine, split narrative, immersive canvas, proof ladder, annotated demo, section bands, guided room. - Give every viewport one dominant element — a headline, an interactive visual, a real screenshot, a step indicator, a proof statement or an action dock — so the eye has somewhere to land.
Verification
- Count card sections on the page; the count is within the site type's card budget.
- Every remaining card group answers "independent objects that users compare" — record the answer.
- No section uses icon + heading + sentence × N for a process, story or explanation.
- Scan test: at 1280 px, in five seconds a reviewer can say what the most important element of each of the first three viewports is.
- Section rhythm varies (height, background, text width, media size, CTA placement) — the page does not read as cloned blocks.
Sources:
Limitations
- Product catalogues, app stores, document libraries and comparison dashboards are card-native; forcing them into editorial layouts is the opposite mistake.
- Pricing pages legitimately use equal cards because customers compare tiers (
web-pricing-page-structure). - Bento-style grids with varied spans are not card walls if the span encodes importance; they become one when every tile is the same size. Either way a bento grid counts against the card limit (house ruling R4), and its lead tile must show real product material (R2).
- The claim that card walls "look AI-generated" is practitioner consensus, not a measured finding (
lesson-decorative-ornament-rule-and-its-evidence). The hierarchy argument stands on its own. - Aligned with house rulings of 2026-09-26 (R1–R4).
- Values verified 2026-09-26: all 1 numeric values in this item were checked (1 against published design guidelines) and confirmed; no corrections were needed.