Lists

Lists of data or content

Demo

  1. Foo
  2. Bar
  3. Baz
  1. Foo
  2. Bar
  3. Baz

API

Tags

Name Type Content
ul Native element <li> children
ol Native element <li> children
dl Native element <dt> and <dd> children

Attributes

Name Value Description
type
  • content
Defines a vertical list of content. Used for implementing designs like the master-detail pattern. See guideline below.

For ul only:

type
  • disc default
  • square
  • circle
  • none
Sets the marker type

For ol only:

type
  • 1 default
  • A
  • a
  • I
  • i
Sets the marker type
reversed Boolean attribute Reverses the order of items
start Number Sets the starting number

Guidelines

Lists are for lists

List elements should be used for real lists. It's tempting to overuse them for anything that repeats, so take time to think about some better alternatives to list elements that should be used instead. For example, one alternative is the nav element when building a navigation bar:

Content list type

The content list type is meant for building a vertical list of content.

Semantics and accessibility

To retain list semantics and accessibility, Mdash leverages the standard tags for content lists. Use the correct tag for the content, i.e. if order matters use ol, otherwise ul. Example:

Ordered, like steps in a recipe:

  1. Prep Cook rice the day before 🍚
  2. Step 1 Preheat wok on high heat, add 2 tbsp. oil 🔥
  3. Step 2 Chop veggies and meat 🧄🥩
  4. Step 3 Add everything to wok and stir fry 🫕
  5. Step 4 Top with fresh basil and serve 🌿

Unordered, like notification preferences:

Nesting

Content list is designed to work wherever you need it. It can be used on its own or, for example, nested in a dialog, menu, or a box like this:

  • one
  • two
  • three

Alternatives

Be intentional. Not every vertical layout is a content list. Sometimes you don't need any particular component at all. In some cases you have tabular content, so use a table. In other cases you may just need horizontal rules, like this recreation of the GitHub sidebar:

README.md

About

The modern web's design system.

javascript css html fun custom-elements standards

Releases

31 tags

Packages

No packages published

Accessibility

Use the correct list parent elements for your use case, i.e. ol when the list order is meaningful and ul when it isn't.