Typography

h1 / .h1

h2 / .h2

h3 / .h3

h4 / .h4

h5 / .h5
h6 / .h6

.accent

.accent.text-center

.accent.text-end

Lead paragraph.

Regular paragaph.

  • strong / .fw-bold
  • em / .fst-italic
  • strong em / .fw-bold.fst-italic
  • .font-title
  • .font-accent
  • .font-body

Colors

.bg-primary
.bg-secondary
.bg-tertiary
.bg-accent
.bg-grey
.bg-light
.bg-gradient
.c-primary
.c-secondary
.c-tertiary
.c-accent
.c-text
.c-text-lt
.c-action

Checkbox & Radio

Checkbox Group
Example Error
Radio Group
Example Error

Input

💬

💬

💬

Password

Quantity

Days
Days
Days
Days

Select

Textarea

Button

Primary

 
 
 
 

Secondary

 
 
 
 

Tertiary

 
 
 
 

Text

 
 
 

Misc.

As Link

Reverse

Arrow

Normal

Reverse

Chip

Sample ChipSecond ChipLong Name ChipChip

Tooltip

Hover over this text.

Accordion

Auto-collapsing Sections

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Persistent Sections, Left Trigger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

As Panel, Plus Trigger

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Panels

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar, enim ullamcorper sollicitudin congue, risus felis tempor risus, in aliquet diam eros nec mi. Ut porta lorem sit amet ultricies sagittis.

Alerts

Badge

  • TBD
  • TBD
  • TBD

Shimmer

Spinner

The spinner will hide after 5 seconds.

Image

Auto

Circle

Cover Only

Rounded

Cover Only

Square

Contain

Cover

3x4

Contain

Cover

4x3

Contain

Cover

3x2

Contain

Cover

16x9

Contain

Cover

2x1

Contain

Cover

Custom Icon

Shopping Cart Account
Shopping Cart Account

Table

LoremIpsumAdipiscingElit
LoremIpsumAdipiscingElit
LoremIpsumAdipiscingElit
LoremIpsumAdipiscingElit
LoremIpsumAdipiscingElit
LoremIpsumAdipiscingElit
LoremIpsumAdipiscingElit