accent

Overview

The accent attribute adds an accent to the left-hand side of a card. Accents can be used to highlight a card 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 card.

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

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.

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