---
title: "accent"
description: "Add a colored accent to the side of a card."
permalink: /docs/runtime/all-ui-components/card/accent/
---
# 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`

<SyntaxCard type={"string (static text, format string, or JS/TS function result)"} defaultValue={"unset"} required />

**Shorthand supported?** `false`

Text that is displayed in the footer position of the `card`.

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

## Advanced Attributes

### `color`

<SyntaxCard type={"string (named color or #HEX value)"} defaultValue={"info"} />

**Shorthand supported?** `false`

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

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