[role="list"]
The role="list" is used to semantically indicate that a group of related items should be treated as a list, even if they are not implemented using traditional list elements like <ul> or <ol>.
Each item within the list should have the role of listitem to ensure proper semantics and accessibility.
Semanticus CSS will stylize elements with role="list" and role="listitem" the same way it does for <ul>, and <li> elements, so you can use it to create custom list structures while maintaining consistent styling.
Note: When using
<ul>or<ol>, don't worry about addingrole="list"orrole="listitem"to the elements, as these roles are implicit already.
Basic Usage
<div role="list">
<div role="listitem">
Item 1
</div>
<div role="listitem">
Item 2
</div>
<div role="listitem">
Item 3
</div>
<div role="listitem">
Item 4
</div>
</div>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".
<div class="card" role="list">
<div role="listitem">
Item 1
</div>
<div aria-current="true" role="listitem">
Item 2
</div>
<div role="listitem">
Item 3
</div>
<div role="listitem">
Item 4
</div>
</div>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.