List

@use '@natachah/vanilla-frontend/scss/components/list';

Syntax

The list is using the native <ul>, <ol> or <div> tag with the class .list.

html

<ul class="list">
    <li>List A</li>
    <li>List B</li>
    <li><a href="#">List C</a></li>
    <li>List D</li>
    <li><span>List E</span> <button>button</button></li>
</ul>

css properties

--list-color
--list-background
--list-border-size
--list-border-style
--list-border-color
--list-border-radius
--list-padding-inline
--list-padding-block
--list-text-align

You can use some button components as <button> or <a role="button"> inside a list to make them full width.

html

<ul class="list">
    <li><button>List A</button></li>
    <li><button disabled>List B</button></li>
    <li>List C</li>
    <li><a role="button" href="#">List D</a></li>
    <li><a role="button">List E</a></li>
</ul>

css properties

--list-transition
--list-decoration
--list-outline-size
--list-outline-style
--list-outline-color
--list-outline-offset
--list-hover-color
--list-hover-background
--list-hover-border-color
--list-focus-color
--list-focus-background
--list-focus-border-color
--list-active-color
--list-active-background
--list-active-border-color
--list-disabled-opacity