<ul>
The <ul> element is used as a building block for composites like Card List, and others.
Important: Assistive technologies implicitly add the
role="list"to the<ul>element, so unless the list is inside some kind of application widget, like a menu, it's best not to combine them with other roles likerole="group".
Basic Usage
<ul ariaCurrent="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>Card List
Card lists are implemented by adding the .card class to a <div role="list"> or a <ul> element.
You can indicate that a certain item is active by using aria-current="true".
<ul class="card">
<li>Item 1</li>
<li aria-current="true">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>Intent Variants
To convey intent and importance, card lists can be styled with different variants:
Modifiers
.ghost creates transparent background card lists with colored text and borders
.subtle creates card lists with a more muted appearance.
.striped creates card lists with alternating background colors for better readability.
Variants applied individually to an item
You can also use variant classes on individual items to indicate their intent and importance.