A container for content representing a single entity. e.g. a contact, article, or task.
Component
Card
63 examples
Card
A11Y Style Guide
- jQuery
- Code examples
- Usage guidelines
- Accessibility
Card
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
Card
Aurora
Government of Canada
- CSS
- Code examples
- Tone of voice
- Open source
Card
Australian Government Design System
- React
- Sass
- Usage guidelines
- Code examples
- Accessibility
- Open source
Teaser
Barnardo’s Design System
- React
- Code examples
- Research
- Usage guidelines
- Tone of voice
- Open source
Card
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Cards
BBC Global Experience Language
- Accessibility
- Usage guidelines
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
- Usage guidelines
- Code examples
Card
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Card
Duet Design System
LocalTapiola
- Angular
- Vue
- React
- Code examples
Tile
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Card
Edison Design System
General Electric
- Web Components
- Usage guidelines
- 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
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
ActivationCard
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
Card
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
Card
giffgaff design system
- Usage guidelines
- Code examples
Card
Goldman Sachs Design System
- Tone of voice
- Usage guidelines
Card
Helsinki Design System
City of Helsinki
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card
Inclusive Components
- Code examples
- Accessibility
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
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Card
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Feature card
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Picto card
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Card
NewsKit
News Corp
- React
- Code examples
- Usage guidelines
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
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
Paste
Twilio
- React
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
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
Card
Rizzo
Lonely Planet
- jQuery
Card
Ruter Components
- React
- Code examples
Navigation Card
Ruter Components
- React
- Code examples
Card
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Open source
- Usage guidelines
Card
Seek style guide
- React
- Code examples
Card
Shoelace
- Web Components
- Code examples
- Open source
Card
Solid
Buzzfeed
- CSS
- Code examples
- Usage guidelines
- Accessibility issues
Card
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
Card - Asset preview
Spectrum CSS
Adobe
- CSS
- Code examples
- Tone of voice
- Open source
Card - Gallery
Spectrum CSS
Adobe
- CSS
- Code examples
- Tone of voice
- Open source
Card
Spectrum CSS
Adobe
- CSS
- Code examples
- 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
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