15.02bComponent
Cards.
Card is the shadcn-classic container with header / content / footer slots. Tile is Insyte's flat brand-variant primitive. Use Card for shapes that need explicit section anatomy; use Tile for everything else.
Default · header + content + footer
Revenue this month
Across all connected stores, net of refunds.
€148,92012.4%
Updated 2 min ago
Compact · header + content only
Three orders flagged.
Supplier processing times slipped past target this morning.
Card vs Tile · when to use which
- Card
- When the surface has explicit anatomy: header (title + description + action) → content → footer. Forms, settings cards, dashboard widgets that need a footer caption.
- Tile
- When you just need a brand-correct flat surface with one of five variants (paper / white / azure / ink / outline). Most KPI tiles, recommendation blocks, and marketing pulls.
- Card radius
- rounded-xl
- Card padding
- px-6 py-6 (header / content / footer each)
- Header
- gap-1.5 · CardTitle medium · CardDescription ink-3
- CardAction
- grid-area absolute top-right of header
- Footer
- 1px hairline top · text-ink-3
- Tile differs
- no slot anatomy · variant-driven surface · no shadow