In Pico, a card is a styled <article>—not a div.card component. Optional header and footer inside the article create titled panels and action rows with consistent padding across breakpoints.
Sectioning content
Wrap each self-contained unit (blog post preview, pricing tier, API endpoint summary) in its own article. Use section with a heading when grouping multiple articles under one topic. This mirrors good semantic structure and lets Pico handle borders and vertical rhythm.
Layout tips
- Place several cards in
class="grid"for responsive columns. - Put primary actions in
footerwithrole="group"button clusters. - Compare with Bootstrap cards, which require many nested classes—Pico needs far less markup for the same visual goal.
Self-check
- Which element is Pico’s card primitive?
- Where do card actions belong—inside
footeror a barediv?