Lists are used for grouping a collection of related items. In HTML there are three types:
- unordered list — for items in no particular order.
- ordered list — for items in a specific order.
- description list — for key-value pairs.
Component
List
63 examples
List
A11Y Style Guide
- jQuery
- Code examples
- Usage guidelines
- Accessibility
Description list
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
List
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
Keyword list
Australian Government Design System
- React
- Sass
- Usage guidelines
- Code examples
- Accessibility
- Open source
Flat list
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
List
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
List
Barnardo’s Design System
- React
- Code examples
- Research
- Usage guidelines
- Tone of voice
- Open source
List
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Block list
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
List
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
Ordered list
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
Unordered list
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
List group
Bootstrap
- Sass
- Code examples
- Accessibility
- Open source
List
Brighton & Hove City Council Website pattern library
Comparison list
Brighton & Hove City Council Website pattern library
List
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Code examples
- Usage guidelines
- Open source
List
Cedar
Recreational Equipment, Inc.
- Vue
- Usage guidelines
- Code examples
List
Chakra UI
- React
- CSS-in-JS
- Accessibility
- Code examples
- Open source
List
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Description list
eBay MIND Patterns
- Accessibility
- Usage guidelines
- Open source
Description list
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
List
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
GroupedList
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
List
Fluent UI
Microsoft
- React
- Web Components
- Mobile
- Usage guidelines
- Code examples
- Accessibility
Entity list
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
List
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
List
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
List
giffgaff design system
- Usage guidelines
- Code examples
List
GroupUI
Volkswagen Group
- Web Components
- Code examples
- Usage guidelines
InlineList
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
List
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
DescriptionList
Jøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
List
Jøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
List
Mailchimp design system
- Code examples
List
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Lists
Mozilla Protocol
- Handlebars
- Sass
- Usage guidelines
- Open source
Ordered :ost
NewsKit
News Corp
- React
- Code examples
- Usage guidelines
Unordered List
NewsKit
News Corp
- React
- Code examples
- Usage guidelines
Contents list
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Do and Don't list
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Summary list
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Metadata
ONS Design System
Office for National Statistics
- HTML
- Nunjucks
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
List
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
List
Oxygen
Repsol
- HTML
- Code examples
- Usage guidelines
List
Paste
Twilio
- React
- CSS-in-JS
- Usage guidelines
- Code examples
- Tone of voice
- Accessibility
- Open source
List
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
List
Quasar Framework
- Vue
- Accessibility issues
- Code examples
Bullet List
Ruter Components
- React
- Code examples
Description List
Ruter Components
- React
- Code examples
Number List
Ruter Components
- React
- Code examples
List
SEB Design Library
Skandinaviska Enskilda Banken
- Sass
- React
- Angular
- Code examples
- Open source
- Usage guidelines
Bullet List
Seek style guide
- React
- Code examples
Dictionary
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
List
Spark Design System
Quicken Loans
- React
- Angular
- Code examples
- Usage guidelines
- Open source
List
Thumbprint
Thumbtack
- React
- Sass
- Code examples
- Open source
List
uStyle
uSwitch
- Sass
- Tone of voice
- Code examples
- Usage guidelines
- Open source
Numbered list
uStyle
uSwitch
- Sass
- Tone of voice
- Code examples
- Usage guidelines
- Open source
Ticked list
uStyle
uSwitch
- Sass
- Tone of voice
- Code examples
- Usage guidelines
- Open source
List
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
Numbered List
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
List
W3C design system
- Sass
- Vanilla JS
- Code examples
- Usage guidelines
- Open source
- Accessibility
List
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source