accent

Overview

The accent attribute adds an accent to the left-hand side of a list-item. Accents can be used to highlight a list-item and convey basic information about the item.

Standard Attributes

label

Required

Type: string (static text, a format string or the return value of a JS/TS function)

Default: unset

Shorthand supported? false

Text that is displayed in the footer position of the list-item.

<list>
    <list-item>
        <header>New User</header>
        <accent label="Create a new user" color="positive"  />
    </list-item>
</list>

Advanced Attributes

color

Optional

Type: string - can be a named color or #HEX value

Default: info

Shorthand supported? false

The background color of the accent and text color of the accent's label.

<list>
    <list-item>
        <header>New User</header>
        <accent label="Create a new user" color="positive"  />
    </list-item>
</list>