Colors

This is some example text.

This is highlighted text.

Background

background

background offset

background offset 2

Colors

brand

info

warning

success

error

Text

text

quiet

Text Colors

text brand

text info

text warning

text success

text error

Borders

color

Alerts & Toasts

Default - this is a link

Brand - this is a link

Info - this is a link

Warning - this is a link

Success - this is a link

Error (also not dismissible) - this is a link

Overrides

color

background

close color

Brand

color: brand

background: brand

close color: brand

Info

color: info

background: info

close color: info

Warning

color: warning

background: warning

close color: warning

Success

color: success

background: success

close color: success

Error

color: error

background: error

close color: error

Links

link color

link color: brand

link color: info

link color: warning

link color: success

link color: error

Avatars

Overrides

color

background

border radius

Badges

default

brand

info

warning

success

error

default

brand

info

warning

success

error

default

brand

info

warning

success

error

Overrides

color

background

border color

Brand

color: brand

background: brand

border color: brand

Info

color: info

background: info

border color: info

Warning

color: warning

background: warning

border color: warning

Success

color: success

background: success

border color: success

Error

color: error

background: error

border color: error

Ghost

color: ghost

border color: ghost

Ghost - Brand

color: brand ghost

border color: brand ghost

Ghost - Info

color: info ghost

border color: info ghost

Ghost - Warning

color: warning ghost

border color: warning ghost

Ghost - Success

color: success ghost

border color: success ghost

Ghost - Error

color: error ghost

border color: error ghost

Buttons

Default

color

color: close

background

border radius

Brand

color: brand

background: brand

Info

color: info

background: info

Warning

color: warning

background: warning

Success

color: success

background: success

Error

color: error

background: error

Ghost

color: ghost

color: ghost hover

background: ghost

Ghost - Brand

color: brand ghost

color: brand ghost hover

background: brand ghost

Ghost - Info

color: info ghost

color: info ghost hover

background: info ghost

Ghost - Warning

color: warning ghost

color: warning ghost hover

background: warning ghost

Ghost - Success

color: success ghost

color: success ghost hover

background: success ghost

Ghost - Error

color: error ghost

color: error ghost hover

background: error ghost

Calendars

Su

Mo

Tu

We

Th

Fr

Sa

Overrides

background

control color

control background

Date

control color: date

control background: date

In month

control color: in month

control background: in month

Current

control color: current

control background: current

control border color: current

Selected

control color: selected

control background: selected

control border color: selected

Hover

control color: hover

control background: hover

Cards

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Items

Header

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Divider

Lorem ipsum dolor sit amet, feugiat corpora ex eam. Inciderint eloquentiam sea et.

Footer

Dividers

Item 1

Item 2

Divider

Item 3

Item 4

Grouped

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Accordions

This is an expanded accordion

To toggle other panes

Overrides

background

Item

item color

item background

Divider

item color: divider

item background: divider

Brand

item color: brand

item background: brand

Info

item color: info

item background: info

Warning

item color: warning

item background: warning

Success

item color: success

item background: success

Error

item color: error

item background: error

Control

control color

control background

Menus

Overrides

control color: menu

control background: menu

menu border

Autocomplete

Modals

Overrides

background

close color

border radius

Ghost

background: ghost

close color: ghost

Divider

Hello, world

Dashed

Dotted

Overrides

color

File Upload

Drop to upload your files

Overrides

upload background

upload border

Inputs

Address line 1:

Postcode:

Overrides

color

background

Border

border

Pagination

Overrides

color

background

border radius

Progress

10%

20%

35%

65%

80%

100%

Overrides

bar background

bar color

background

Brand

bar background: brand

bar color: brand

background: brand

Info

bar background: info

bar color: info

background: info

Warning

bar background: warning

bar color: warning

background: warning

Success

bar background: success

bar color: success

background: success

Error

bar background: error

bar color: error

background: error

Border

border radius

Ranges

Handle

handle background

handle box shadow

handle border radius

Track

track color

track border radius

Colors

track color: brand

track color: info

track color: warning

track color: success

track color: error

Tables

Clickable table
First name	Last name	Username
Jim	Kirk	@captaink
Mr.	Spock	@science101
Nyota	Uhura	@comms

Striped table
First name	Last name	Username
Jim	Kirk	@captaink
Mr.	Spock	@science101
Nyota	Uhura	@comms

Overrides

caption color

striped background

heading background

heading border

Rows

row color

row background

Clickable

row color: clickable

row background: clickable

Disabled

row color: disabled

row background: disabled

Tabs

This is tab one

Overrides

heading color

heading background

heading border color

Active

heading color: active

heading background: active

heading border color: active

Hover

heading color: hover

heading background: hover

heading border color: hover

Brand

heading color: brand

heading background: brand

heading border color: brand

Info

heading color: info

heading background: info

heading border color: info

Warning

heading color: warning

heading background: warning

heading border color: warning

Success

heading color: success

heading background: success

heading border color: success

Error

heading color: error

heading background: error

heading border color: error

Border

heading border radius

Timelines

Nothing

Big bang

Widely considered to be how the universe began

Galaxies go everywhere

Solar systems form

Earth appears

Human infestation occurs!

All this has happened before and will happen again

Evolution

Overrides

item color

line color

spacing color

Colors

item color: brand

item color: info

item color: warning

item color: success

item color: error

Loading

item color: loading

Toggles

Overrides

track color

track color: unchecked

track color: brand

track color: info

track color: warning

track color: success

track color: error

track border radius

Handle

handle background

handle border radius

handle box shadow

Tooltips

Overrides

color

background

border radius

Trees

File 4

File 5

File 6

File 7

File 8

File 9

File 10

File 11

File 12

File 1

File 2

File 3

Overrides

item color

item expandable color

item expanded color

Typography

Hyper-links

.c-link
brand
info
warning
success
error

Highlighting text

Highlight words with the highlight class

Code

<html>
  <body>
    <main>
      <header>
        <h1>code words with the code class</h1>
      </header>
    </main>
  </body>
</html>

Blockquote

"Never tell the same lie twice."
- Garak

"Logic is the beginning of wisdom, not the end."
- Spock

"I'm no angel, but I try to live every day as the best human being I know how to be."
- Miles O'Brien

"I don't believe in the no-win scenario."
- James T. Kirk

"Things are only impossible until they are not."
- Jean-Luc Picard

Links

color

background

background: hover

Link Colors

color: brand

background: brand

background: brand hover

color: info

background: info

background: info hover

color: warning

background: warning

background: warning hover

color: success

background: success

background: success hover

color: error

background: error

background: error hover

Highlight

highlight color

highlight background

Code

code color

code background

code border color

code border radius

Blockquotes

quotation border color

quotation border color: brand

quotation border color: info

quotation border color: warning

quotation border color: success

quotation border color: error

quotation footer color

Blaze Theme

Colors

Alerts & Toasts

Avatars

Badges

Buttons

Calendars

Cards

Heading
Sub-heading

Items

Dividers

Grouped

Accordions

Menus

Autocomplete

Modals

Divider

File Upload

Inputs

Progress

Ranges

Tables

Tabs

Timelines

Toggles

Tooltips

Trees

Typography

Hyper-links

Highlighting text

Code

Blockquote