Cards group related content: card wrapper, card-divider for headers, card-section for body and footer areas. Older Foundation sites also used panel—cards are the modern default for product tiles and blog summaries.
Layout tips
- Equal-height rows: place cards in
cellelements insidegrid-x medium-up-3 - Clickable cards: wrap with
<a>and keep one clear heading inside - Depth: default border; add
shadowvia custom CSS or Foundation extensions if enabled in your build
Important interview questions and answers
- Q: card vs callout?
A: Cards structure repeatable content tiles; callouts highlight a single message or alert band. - Q: How do card grids stay even height?
A: Flex rows with equal-width cells; cards stretch to cell height when inner sections use consistent padding.
Self-check
- Name the two section classes inside a card besides the outer
card. - Which grid class builds a three-column card row on large screens?