Component

Card

Also known as: Tile

A container for content representing a single entity. e.g. a contact, article, or task.

Card

A11Y Style Guide
Tech
- jQuery
Features
- Code examples
- Usage guidelines
- Accessibility
- Unmaintained
- Open source
Card

Ant Design
Tech
- React
Features
- Code examples
- Accessibility issues
- Open source
Card

Auro
Tech
- Web Components
- Sass
Features
- Code examples
- Usage guidelines
- Open source
Card

Aurora
Tech
- CSS
Features
- Code examples
- Tone of voice
- Open source
- Unmaintained
Content card

Backpack
Tech
- Mobile
- React
Features
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Card

Base Web
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Message Card

Base Web
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Cards

BBC Global Experience Language
Card

Blueprint
Tech
- React
- Sass
Features
- Open source
Card

Bolt Design System
Tech
- Sass
- Twig
- Web Components
Features
- Code examples
- Tone of voice
- Open source
Card

Bootstrap
Tech
- Sass
Features
- Code examples
- Accessibility
- Open source
Card

Bulma
Tech
- Sass
Features
- Code examples
- Accessibility issues
- Open source
Card

Cedar
Tech
- Vue
- Sass
- CSS Modules
Features
- Usage guidelines
- Code examples
- Open source
Card

Chakra UI
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Card

Clarity Design System
Tech
- CSS
- Angular
- Web Components
Features
- Code examples
- Usage guidelines
- Open source
Card

Coral
Tech
- React
Features
- Code examples
- Tone of voice
- Open source
Card

Decathlon Design System
Tech
- CSS
- React
- Svelte
- Vue
- Web Components
Features
- Usage guidelines
- Code examples
- Accessibility
- Open source
Card

Dell Design System
Tech
- Vanilla JS
Features
- Code examples
- Usage guidelines
Card

Duet Design System
Tech
- Angular
- Vue
- React
Features
- Code examples
Tile

eBay MIND Patterns
Item tile

eBay Playbook
Tech
- HTML
- React
Features
- Code examples
Panel

Elastic UI framework
Tech
- React
- Sass
Features
- Code examples
- Open source
Card

Elastic UI framework
Tech
- React
- Sass
Features
- Code examples
- Open source
Card

Elisa Design System
Tech
- React
Features
- Usage guidelines
- Code examples
- Accessibility
Card

Flowbite
Tech
- Tailwind CSS
Features
- Open source
- Code examples
DocumentCard

Fluent UI
Tech
- React
- Web Components
- Mobile
Features
- Usage guidelines
- Code examples
- Accessibility
- Open source
Asset card

Forma 36
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Card

Forma 36
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Entry card

Forma 36
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
ActivationCard

Gestalt
Tech
- React
- CSS
Features
- Code examples
- Open source
- Usage guidelines
Card

giffgaff design system
Card

GOLD Design System
Tech
- React
- Sass
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
- Unmaintained
Card

Helios
Tech
- Ember
- Sass
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card

Helsinki Design System
Tech
- React
- CSS
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card

HeroUI
Tech
- React
- Tailwind CSS
Features
- Code examples
- Open source
Card

Inclusive Components
Card

Jøkul Designsystem
Tech
- React
- Sass
Features
- Code examples
- Usage guidelines
- Open source
Card

Lightning Design System
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Card

Material Design
Tech
- Mobile
- Web Components
- Sass
Features
- Usage guidelines
- Open source
- Accessibility
Card

Morningstar Product System
Tech
- Vue
Features
- Usage guidelines
Card

Mozilla Protocol
Tech
- Handlebars
- Sass
Features
- Usage guidelines
- Open source
Tile

Nessie
Tech
- Web Components
- Tailwind CSS
Features
- Usage guidelines
- Code examples
Tile Product

Nessie
Tech
- Web Components
- Tailwind CSS
Features
- Usage guidelines
- Code examples
Card

NewsKit
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Card Composable

NewsKit
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Card

NHS Digital service manual
Tech
- Nunjucks
Features
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Card

Nord Design System
Tech
- Web Components
Features
- Code examples
- Usage guidelines
Card

Nucleus Design System
Tech
- Web Components
Features
- Usage guidelines
Product card

Nucleus Design System
Tech
- Web Components
Features
- Usage guidelines
Card

ONS Design System
Tech
- HTML
- Nunjucks
- Sass
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card

Orbit
Tech
- React
- CSS-in-JS
Features
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Tile

Orbit
Tech
- React
- CSS-in-JS
Features
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Card

Pajamas
Tech
- Vue
Features
- Usage guidelines
- Code examples
- Open source
Card

Paste
Tech
- React
- CSS-in-JS
Features
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
Card

PatternFly
Tech
- React
- Sass
Features
- Tone of voice
- Open source
- Usage guidelines
Image card

Pharos
Tech
- Web Components
- Sass
Features
- Usage guidelines
- Open source
- Code examples
- Accessibility
- Tone of voice
Card

Polaris
Tech
- React
Features
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Callout card

Polaris
Tech
- React
Features
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Card

Quasar Framework
Tech
- Vue
Features
- Accessibility issues
- Code examples
- Open source
Card

Ruter Components
Tech
- React
Features
- Code examples
- Unmaintained
Navigation Card

Ruter Components
Tech
- React
Features
- Code examples
- Unmaintained
Card

SEB Design Library
Tech
- Sass
- React
- Angular
Features
- Code examples
- Usage guidelines
Card

Seek style guide
Tech
- React
Features
- Code examples
- Unmaintained
Card

shadcn/ui
Tech
- React
- Tailwind CSS
Features
- Code examples
- Open source
Card

Shoelace
Tech
- Web Components
Features
- Code examples
- Open source
Card

Spectrum
Tech
- CSS
- Web Components
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Card

Stacks
Tech
- Stimulus
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Service Card

Thumbprint
Tech
- React
- Sass
Features
- Code examples
- Open source
Content card

Visa Product Design System
Tech
- Angular
- React
- CSS
- Mobile
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Card

W3C design system
Tech
- Sass
- Vanilla JS
Features
- Code examples
- Usage guidelines
- Open source
- Accessibility
Card

Wanda
Tech
- React
- CSS Modules
Features
- Code examples
- Open source
Product card

Wanda
Tech
- React
- CSS Modules
Features
- Code examples
- Open source
Content card

West Midlands Network Design System
Tech
- HTML
- Nunjucks
- Sass
Features
- Code examples
- Usage guidelines
- Open source
Card

Workday Canvas Design System
Tech
- React
Features
- Usage guidelines
- Accessibility
- Tone of voice
- Open source