Lists
Lists of data or content
Demo
- Foo
- Bar
- Baz
- Foo
- Bar
- Baz
- Foo
- Bar
- Baz
- Foo
- Bar
- 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 |
|
Defines a vertical list of content. Used for implementing designs like the master-detail pattern. See guideline below. |
For ul only:
type |
|
Sets the marker type |
For ol only:
type |
|
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:
- Prep Cook rice the day before 🍚
- Step 1 Preheat wok on high heat, add 2 tbsp. oil 🔥
- Step 2 Chop veggies and meat 🧄🥩
- Step 3 Add everything to wok and stir fry 🫕
- Step 4 Top with fresh basil and serve 🌿
Unordered, like notification preferences:
- SMS
- Push
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:
About
The modern web's design system.
Releases
Packages
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.