Lists
Used to display a group of similar objects
Basic lists
Display items vertically with basic styling.
- Book1
- Book2
- Book3
- Book4
<ul class="list">
<li class="list__item">Book1</li>
<li class="list__item">Book2</li>
<li class="list__item">Book3</li>
<li class="list__item">Book4</li>
</ul>List Header
You can also add a header to your list using the following.
- Favorite books
- Book1
- Book2
- Book3
- Book4
<ul class="list">
<li class="list__header">Favorite books</li>
<li class="list__item">Book1</li>
<li class="list__item">Book2</li>
<li class="list__item">Book3</li>
<li class="list__item">Book4</li>
</ul>Solid List
List with a solid background, the background defaults to the themes background-variant variable.
- Favorite books
- Book1
- Book2
- Book3
- Book4
<ul class="list list--solid">
<li class="list__header">Favorite books</li>
<li class="list__item">Book1</li>
<li class="list__item">Book2</li>
<li class="list__item">Book3</li>
<li class="list__item">Book4</li>
</ul>Solid Items
Instead of giving the entire list a background, you could give background to each list item.
- Favorite books
- Book1
- Book2
- Book3
- Book4
<ul class="list">
<li class="list__header">Favorite books</li>
<li class="list__item list__item--solid">Book1</li>
<li class="list__item list__item--solid">Book2</li>
<li class="list__item list__item--solid">Book3</li>
<li class="list__item list__item--solid">Book4</li>
</ul>List of Links
When you have a list of links, you can use the following class so that all the links don't stand out much. Only links with active or hover style would stand out.
<ul class="list list--links">
<li class="list__header">Favorite books</li>
<li class="list__item">
<a class="link">Book1 </a>
</li>
<li class="list__item">
<a class="link">Book2 </a>
</li>
<li class="list__item">
<a class="link">Book3 </a>
</li>
<li class="list__item">
<a class="link">Book4 </a>
</li>
</ul>