Card UI design examples
271 card designs from live websites, each credited to the site it came from.
Cards hold one idea each: a product, a project, an article. Consistent image ratios, one clear title and a single action per card are what keep a grid of them readable; hover states are where they get personality.
Below: the strongest 48, including work from designbomb.it, adamho.com, i-mad.com and drams.framer.website.
Blister Pack Product Cards
designbomb.it
Archetype Featured Work
adamho.com
Asymmetric Bento Portfolio Grid
i-mad.com
Neumorphic radio player component cards
drams.framer.website
Y2K Past-Drops Cards
dich-fashion.webflow.io
DAW-Style Featured Artist Card
bitbirdofficial.com
Polaroid Show Card
beatsinspace.net
3D Mineral Service Cards
xxix.co
3×2 Service Grid with Minerals
xxix.co
Bento Project Grid with Sidebar
xxix.co
Full-Width Project Card + Metadata
officeofjoediver.co
Full-Bleed Project Card + Metadata
officeofjoediver.co
Future Perfect — Glass Media Player
timeless.co
Perforated Ticket Stub Cards
designbomb.it
Macro photography background with overlaid recipe typography
instagram.com
Monochrome editorial card with heavy grain and brutalist typography
instagram.com
Ticket-inspired user profile card with perforated dividers
victorberbel.work
Vertical Format Spec Card
format.obys.agency
Jasper Featured Work
adamho.com
Archetype Project Card
adamho.com
Valhalla Project Card
adamho.com
Paradigm Project Card
adamho.com
Succinct Project Card
adamho.com
ENS Project Card
adamho.com
Trading card layout with frame-breaking 3D typography
instagram.com
Split-layout news card with duotone photo
paulkalkbrenner.net
Shrink-Wrap CD Case Component
musician.growon.kr
Serif Branding Card
jesperlandberg.com
Folder-Tab Bundle Product Card
doronsupply.com
Testimony Split-Layout Card
carrierescene.ca
Bento Feature Cards Grid
butter.video
Interactive pull-tab card with tactile reveal
instagram.com
Digital ticket card with perforated edge metaphor
xhulia.com
Illustrative brand identity with hand-drawn typography
linkedin.com
Audio player card with pixel-grid visualizer
designweek.co.uk
Editorial article card with conceptual illustration
mayangn.com
Floating timer card with concentric ripple visualization
instagram.com
Project Card Masonry Grid
tol.is
Stamp-Border Portfolio Card
thedelhifolk.com
Homepage Feature Block
streamtime.net
4-Column Project Info Grid
olivergareis.com
Syncopated Bento Grid with Vertical Hero Card
i-mad.com
Triptych Category Cards with Full-Bleed Imagery
i-mad.com
Grunge era card with Ray Gun cover
historyofgraphicdesign.com
Art Nouveau era card with ornamental layering
historyofgraphicdesign.com
Psychedelic era card with organic contrast
historyofgraphicdesign.com
Art Deco era card with layered type
historyofgraphicdesign.com
Constructivist era card with bold geometry
historyofgraphicdesign.com