Skip to content
Try free

Cards, tiles and carousels (Desktop)

Desktop packData display

Desktop cards and tiles: media, callout, selectable, expandable, kanban, template, checklist, integration and carousels.

components
13
variants
67
recreations
4
themes
5

Also for mobile: Cards, tiles and carousels

What’s inside

Twelve card patterns for web apps: static and link cards, media cards, callouts, clickable, selectable and expandable tiles, kanban cards with a board in context, template cards, a setup checklist, integration cards, card and hero carousels and empty cards. Each page has a state grid and notes on keyboard and screen reader use, including how a whole card acts as one link.

  • 13 sets across 12 card and tile patterns
  • Selectable tiles with radio and checkbox behaviour
  • Kanban cards with focus and grabbed states
  • 4 recreations of real product card layouts
  • Static and link card, every variant

    Static and link card

    5 variants

  • Media card, every variant

    Media card

    8 variants

  • Callout card, every variant

    Callout card

    5 variants

  • Clickable tile, every variant

    Clickable tile

    5 variants

  • Selectable tile, every variant

    Selectable tile

    Free sample

    12 variants

  • Expandable tile, every variant

    Expandable tile

    6 variants

  • Kanban card, every variant

    Kanban card

    5 variants

  • Template card, every variant

    Template card

    4 variants

  • Setup checklist card, every variant

    Setup checklist card

    3 variants

  • Integration card, every variant

    Integration card

    5 variants

  • Card carousel, every variant

    Card carousel

    3 variants

  • Hero carousel

    2 variants

  • Empty card, every variant

    Empty card

    4 variants

Figma file
SuperDuper Pack: Cards, tiles and carousels (Desktop)
Themes
Light, Dark, Light high contrast, Dark high contrast and Wireframe
Densities
Comfortable and Compact
Also in the file
Usage and accessibility notes, motion specs, Figma variables
Covers 3 UI elements and 1 screen pattern
Card, Tile, Carousel and Browse & discover

How Shopify admin, Vercel and Zapier and others do it

Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.

  • Commerce admin home, every variant

    Commerce admin home

    Recreated from Shopify admin

  • Template gallery, every variant

    Template gallery

    Recreated from Vercel

  • App directory, every variant

    App directory

    Recreated from Zapier

  • Kanban board, every variant

    Kanban board

    Recreated from Trello

Not affiliated with, endorsed or sponsored by Shopify admin, Vercel, Zapier and Trello. Their names are trade marks of their owners and are used only to say what each recreation is based on.

Selectable tile, every variant

See the selectable tile full size, free

A selectable tile across selection and interaction states, ready for plan or option pickers. All 12 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.

More data display packs

See all data display

  • Charts and data viz

    Desktop13 components54 variants4 recreations

    Desktop line, bar, donut, heatmap, funnel, scatter and gauge charts drawn as vectors, with legends, tooltips and states.

    $9, or included with Pro

  • Dashboards and KPIs

    Desktop10 components35 variants5 recreations

    Desktop KPI rows, widget cards, date range pickers, top-N lists, dashboard homes and empty states with vector charts.

    $9, or included with Pro

  • Avatars, images and placeholders

    Desktop10 components80 variants2 recreations

    Desktop avatars, stacks, presence, thumbnails, galleries, a lightbox and image frames, with editable placeholder art.

    $9, or included with Pro

Questions about the cards, tiles and carousels pack

  • One Figma file: SuperDuper Pack: Cards, tiles and carousels (Desktop). It has 13 components with 67 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.