A container for content representing a single entity. e.g. a contact, article, or task.
Component
Card
Other names: Tile
92 examples
Card
A11Y Style Guide
- jQuery
- Code examples
- Usage guidelines
- Accessibility
- Unmaintained
- Open source
Card
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
- Open source
Card
Auro
Alaska Airlines
- Web Components
- Sass
- Code examples
- Usage guidelines
- Open source
Card
Aurora
Government of Canada
- CSS
- Code examples
- Tone of voice
- Open source
- Unmaintained
Content card
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Card
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Message Card
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Cards
BBC Global Experience Language
- Accessibility
- Usage guidelines
- Unmaintained
Card
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
Card
Bootstrap
- Sass
- Code examples
- Accessibility
- Open source
Card
Bulma
- Sass
- Code examples
- Accessibility issues
- Open source
Card
Cedar
Recreational Equipment, Inc.
- Vue
- Sass
- CSS Modules
- Usage guidelines
- Code examples
- Open source
Card
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Card
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Card
Decathlon Design System
- CSS
- React
- Svelte
- Vue
- Web Components
- Usage guidelines
- Code examples
- Accessibility
- Open source
Card
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
Card
Duet Design System
LocalTapiola
- Angular
- Vue
- React
- Code examples
Tile
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Item tile
eBay Playbook
- HTML
- React
- Code examples
Panel
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
Card
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
Card
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Card
Flowbite
- Tailwind CSS
- Open source
- Code examples
DocumentCard
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
- Open source
HoverCard
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
- Open source
Asset card
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Card
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Entry card
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Inline entry card
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Card
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
ActivationCard
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
- Usage guidelines
Card
giffgaff design system
- Usage guidelines
- Code examples
Card
GOLD Design System
Design System AU
- React
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
- Unmaintained
Card
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card
Helsinki Design System
City of Helsinki
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card
Inclusive Components
- Code examples
- Accessibility
- Unmaintained
Card
Jøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Card
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Card
Luna
Sainsbury’s
- React
- Sass
- Usage guidelines
- Code examples
- Tone of voice
Card
Material Design
Google
- Mobile
- Web Components
- Sass
- Usage guidelines
- Open source
- Accessibility
Card
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Card
Morningstar Design System
- Vue
- Usage guidelines
Card
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Tile
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Tile Product
Nessie
Nederlandse Spoorwegen
- Web Components
- Tailwind CSS
- Usage guidelines
- Code examples
Card
NewsKit
News Corp
- React
- Code examples
- Usage guidelines
- Open source
Card
NextUI
- React
- CSS-in-JS
- Code examples
- Open source
Card
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Care cards
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Card
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Card
Nucleus Design System
British Gas
- Web Components
- Usage guidelines
Product card
Nucleus Design System
British Gas
- Web Components
- Usage guidelines
Card
ONS Design System
Office for National Statistics
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Picture card
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Tile
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Card
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Card
Paste
Twilio
- React
- CSS-in-JS
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
Card
PatternFly
Red Hat
- React
- Sass
- Tone of voice
- Open source
- Usage guidelines
Image card
Pharos
JSTOR
- Web Components
- Sass
- Usage guidelines
- Open source
- Code examples
- Accessibility
- Tone of voice
Card
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Callout card
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Card
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Card
Ruter Components
- React
- Code examples
- Unmaintained
Navigation Card
Ruter Components
- React
- Code examples
- Unmaintained
Card
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Usage guidelines
Card
Seek style guide
- React
- Code examples
- Unmaintained
Card
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Card
Shoelace
- Web Components
- Code examples
- Open source
Card
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
- Unmaintained
Card
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Card
Stacks
Stack Overflow
- Stimulus
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Service Card
Thumbprint
Thumbtack
- React
- Sass
- Code examples
- Open source
Card
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
Card
W3C design system
- Sass
- Vanilla JS
- Code examples
- Usage guidelines
- Open source
- Accessibility
Card
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Product card
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Content card
West Midlands Network Design System
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Open source
Card
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source