# Card UI Design Examples

See how real products package information into reusable card layouts. Compare hierarchy, imagery, metadata, actions, and states, then adapt a card pattern around your own content.

## 169 Card templates · Web

[Card | Selenite](/content/gallery/inspirations/card-web-1/index.html)

Card | Selenite

[Card | Feldspar](/content/gallery/inspirations/card-web-2/index.html)

Card | Feldspar

[Card | Squall](/content/gallery/inspirations/card-web-3/index.html)

Card | Squall

[Card | Halcyon](/content/gallery/inspirations/card-web-4/index.html)

Card | Halcyon

[Card | Quadrat Console](/content/gallery/inspirations/card-web-5/index.html)

Card | Quadrat Console

[Card | Colophon](/content/gallery/inspirations/card-web-6/index.html)

Card | Colophon

[Card | Rhumbline](/content/gallery/inspirations/card-web-7/index.html)

Card | Rhumbline

[Card | Contour Rentals](/content/gallery/inspirations/card-web-8/index.html)

Card | Contour Rentals

[Card | Mainspring](/content/gallery/inspirations/card-web-9/index.html)

Card | Mainspring

[Card | Tourbillon](/content/gallery/inspirations/card-web-10/index.html)

Card | Tourbillon

[Card | Sorrel](/content/gallery/inspirations/card-web-11/index.html)

Card | Sorrel

[Card | Yarrow](/content/gallery/inspirations/card-web-12/index.html)

Card | Yarrow

[Card | Selvedge](/content/gallery/inspirations/card-web-13/index.html)

Card | Selvedge

[Card | Percale](/content/gallery/inspirations/card-web-14/index.html)

Card | Percale

[Card | Binnacle](/content/gallery/inspirations/card-web-15/index.html)

Card | Binnacle

[Card | Halyard](/content/gallery/inspirations/card-web-16/index.html)

Card | Halyard

[Card | Transom](/content/gallery/inspirations/card-web-17/index.html)

Card | Transom

[Card | Cornice](/content/gallery/inspirations/card-web-18/index.html)

Card | Cornice

[Card | Mezzotint Console](/content/gallery/inspirations/card-web-19/index.html)

Card | Mezzotint Console

[Card | Drypoint](/content/gallery/inspirations/card-web-20/index.html)

Card | Drypoint

[Card | Crucible](/content/gallery/inspirations/card-web-21/index.html)

Card | Crucible

[Card | Bellows](/content/gallery/inspirations/card-web-22/index.html)

Card | Bellows

[Card | Terrane](/content/gallery/inspirations/card-web-23/index.html)

Card | Terrane

[Card | Osier](/content/gallery/inspirations/card-web-24/index.html)

Card | Osier

## Card templates for Web

Explore 169 open-source Card templates for the web: card layouts, flows and components. Every template ships with production-ready code built on modern stacks like React, Next.js and Tailwind CSS.

Preview any Card UI live, remix its layout and components to match your product, and export clean code you can ship the same day.