Compare
Side-by-side
Pick two components. The diff panel below surfaces every place the
canon distinguishes them — required slots, variants, properties, state
sets, schema sections, and axe rules. When the canon already pins a
distinction (via whenToUse.vsRelated), that prose is
quoted verbatim at the top.
Card
A bounded container that groups a coherent unit of content — typically a title, supporting body, optional media, and optional actions — and lifts it as a single perceivable object on the page.
Tile
An image-led grid item with minimal supporting text. Used for galleries, asset grids, image picker grids, and any layout where visual content is primary and text is supplementary or absent. Distinct from Card (content-led with hierarchical title+body+media+actions); a wall of Tiles reads as a gallery, a wall of Cards reads as a feed. Tiles are commonly arranged in a grid with consistent aspect ratios and may be interactive (whole-tile activates) or selectable (whole-tile multi-selects).
Diff
From the canon
Card on Tile: `Tile` is image-led with minimal supporting text; `Card` is content-led with hierarchical title plus body plus media. A wall of Tiles reads as a gallery; a wall of Cards reads as a feed.
Tile on Card: `Card` is content-led with hierarchical title + body + media + actions; `Tile` is image-led with minimal text. A wall of Cards reads as a feed (each card is read sequentially); a wall of Tiles reads as a gallery (the whole grid is scanned visually). The decision test: is the user scanning for visual content or textual hierarchy?
Anatomy slots
- Required only in Card
bodytitle- Required only in Tile
root- Optional only in Card
actionseyebrowfootersubtitle- Optional only in Tile
badgelabeloverlayselect-affordance- Slot ids in both
media
Variants
- Only in Card
- elevated, flat, outlined
- Only in Tile
- interactive, selectable, standard
Properties
- Only in Card
- interactive, orientation
- Only in Tile
- aspect, hasLabel, hasOverlay
- Same name and kind
- density
Interactive states
- Shared
- active, disabled, focus-visible, hover
Data states
- Only in Card
- loading
- Only in Tile
- idle
- Shared
- selected
Schema sections declared
| Card | Tile | |
|---|---|---|
| motion | — | ✓ |
| responsive | ✓ | ✓ |
| state transitions | — | ✓ |
| events | — | ✓ |
| form integration | — | ✓ |
| a11y acceptance | ✓ | ✓ |
| performance thresholds | — | ✓ |
axe-core rules
- Only in Card
heading-order- Only in Tile
aria-allowed-rolearia-required-attraria-required-childrenaria-required-parentbutton-namerole-img-alt- Shared
color-contrastimage-altlink-name