Text Accent Colors

Convey meaning through color with a handful of emphasis utility classes. Accent colors were designed to applied to components like the number counter or charts. It is best to exercise restraint when using these classes on general body copy as color contrast may be insufficient for the visually impaired.

Examples:

Accent Text 1

Accent Text 2

Accent Text 3

Accent Text 4

Accent Text 5

Accent Text 6

Accent Text 7

Accent Text 8

Accent Text 9

Accent Text Primary 1

Accent Text Primary 2

Accent Text Primary 3

Accent Text Secondary 1

Accent Text Secondary 2

Accent Text Secondary 3

Muted Text

Primary Text

Success Text

Info Text

Warning Text

Danger Text

Source Code:

<p class="text-accent1">Accent Text 1</p> <p class="text-accent2">Accent Text 2</p> <p class="text-accent3">Accent Text 3</p> <p class="text-accent4">Accent Text 4</p> <p class="text-accent5">Accent Text 5</p> <p class="text-accent6">Accent Text 6</p> <p class="text-accent7">Accent Text 7</p> <p class="text-accent8">Accent Text 8</p> <p class="text-accent9">Accent Text 9</p> <!-- Color Scheme Styles --> <p class="text-accent-p1">Accent Text Primary 1</p> <p class="text-accent-p2">Accent Text Primary 2</p> <p class="text-accent-p3">Accent Text Primary 3</p> <p class="text-accent-s1">Accent Text Secondary 1</p> <p class="text-accent-s2">Accent Text Secondary 2</p> <p class="text-accent-s3">Accent Text Secondary 3</p> <!-- Additional Helper Styles --> <p class="text-muted">Muted Text</p> <p class="text-primary">Primary Text</p> <p class="text-success">Success Text</p> <p class="text-info">Info Text</p> <p class="text-warning">Warning Text</p> <p class="text-danger">Danger Text</p>