Card

A self-contained content surface (an “object”): article preview, profile, stat block, module.

A content surface container. Use for modules, grouped content, forms, and sections.

Cards can contain interactive elements, but aren’t automatically “clickable blocks.”

• Visual: distinct surface, padding, border/shadow, rounded corners.
• Role: content-first (scan/read).
• Use when: the content can stand on its own as a unit.
• Avoid: making every card a giant link unless it’s truly a tile.

Panel

A structured region that frames multiple items or controls (settings blocks, grouped content).

A framed region with structure. Best for settings blocks, “titled regions,” and grouped controls.

Panels auto-style the first heading as a header bar.

• Visual: region container; often flatter than cards; may auto-style first heading as a header.
• Role: grouping and structure.
• Use when: you need a titled region that contains mixed content.
• Avoid: using panels for small single-item previews (use cards instead).

Tile

A navigation/action block where the entire surface is the link/action (dashboards, indexes).

An interactive navigation/action block. Use when the whole block is the link/action (index, dashboards).

Tiles include keyboard focus states and WCAG-friendly hover/focus contrast.

• Visual: consistent sizing in a grid; strong hover/focus affordance.
• Role: action-first (click).
• Use when: the whole block is the interactive target.
• Avoid: mixing long paragraphs—tiles are meant to stay short.

Banner

A horizontal message strip for announcements, page/section context, or lightweight calls-to-action.

Page-level containers for page titles and high-impact entry sections. Not a card.

Use banners for headings

• Visual: wide strip; often tinted or accented; medium emphasis.
• Role: message-first (announce).
• Use when: you need a noticeable message without taking over the page.
• Avoid: using banners as grid items—use cards/tiles instead.

Hero

A high-impact entry section (usually near the top of a page) with primary messaging and a clear CTA.

For page headings, heroes for campaigns or primary page entry content.

• Visual: large spacing + big headline; often imagery/pattern; highest hierarchy on page.
• Role: identity + primary action.
• Use when: landing pages, hubs, campaigns, primary entry points.
• Avoid: stacking multiple heroes—pick one per page region.

Fast rules

• Card: content object (read/scan).
• Tile: action object (click).
• Panel: grouping region (contains multiple things).
• Banner: message strip (announce/status).
• Hero: entry section (page identity + CTA).

If everything becomes a “card,” pages lose hierarchy—use the right container to keep rhythm and meaning.