Test Page

To test what is broken and fix it!

Colors

Primary
Name:
 
Exact:  
Closest:  
Value:  
Secondary
Name:
 
Exact:  
Closest:  
Value:  
Success
Name:
 
Exact:  
Closest:  
Value:  
Info
Name:
 
Exact:  
Closest:  
Value:  
Warning
Name:
 
Exact:  
Closest:  
Value:  
Danger
Name:
 
Exact:  
Closest:  
Value:  
Light
Name:
 
Exact:  
Closest:  
Value:  
Dark
Name:
 
Exact:  
Closest:  
Value:  
Body
Name:
 
Exact:  
Closest:  
Value:  
Container
Name:
 
Exact:  
Closest:  
Value:  

Accordions

Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.

Alerts

Primary

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Secondary

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Success

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Info

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Warning

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Danger

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Light

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Dark

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Badges

Regular

Example H6 New
Example H5 New

Example H4 New

Example H3 New

Example H2 New

Example H1 New

Primary Secondary Success Info Warning Danger Light Dark

Pill

Example H6 New
Example H5 New

Example H4 New

Example H3 New

Example H2 New

Example H1 New

Primary Secondary Success Info Warning Danger Light Dark

Buttons

Regular

Default State

Hover State

Active State

Disabled State

Focus-visible State

Outline

Default State

Hover State

Active State

Disabled State

Focus-visible State

Sizes

Progress Bar

Primary

Basic

Striped

Animated

Animated Reversed

Secondary

Basic

Striped

Animated

Animated Reversed

Success

Basic

Striped

Animated

Animated Reversed

Info

Basic

Striped

Animated

Animated Reversed

Warning

Basic

Striped

Animated

Animated Reversed

Danger

Basic

Striped

Animated

Animated Reversed

Light

Basic

Striped

Animated

Animated Reversed

Dark

Basic

Striped

Animated

Animated Reversed

Border Spinner

Primary

Secondary

Success

Info

Warning

Danger

Light

Dark

Growing Spinner

Primary

Secondary

Success

Info

Warning

Danger

Light

Dark

Text Color

Primary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Primary Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Secondary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Secondary Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Success: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Success Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Info: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Info Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Warning: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Warning Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Danger: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Danger Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Light: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Light Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Dark: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Dark Emphasis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Text Background

Primary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Secondary: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Success: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Info: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Warning: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Danger: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Light: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Dark: Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae exercitationem vero quibusdam?

Link Colors

Default    Default Active
Primary    Primary Active    Primary Hover
Secondary    Secondary Active    Secondary Hover
Success    Success Active    Success Hover
Info    Info Active    Info Hover
Warning    Warning Active    Warning Hover
Danger    Danger Active    Danger Hover
Light    Light Active    Light Hover
Dark    Dark Active    Dark Hover


Link Opacity

10% Opacity 25% Opacity 50% Opacity 75% Opacity 100% Opacity

Underline Opacity

10% Opacity 25% Opacity 50% Opacity 75% Opacity 100% Opacity

Link Underlines

Primary Underline Secondary Underline Success Underline Info Underline Warning Underline Danger Underline Light Underline Dark Underline

Background Color

Primary Background Gradient
Primary Background
Primary Subtle Background
Secondary Background Gradient
Secondary Background
Secondary Subtle Background
Success Background Gradient
Success Background
Success Subtle Background
Info Background Gradient
Info Background
Info Subtle Background
Warning Background Gradient
Warning Background
Warning Subtle Background
Danger Background Gradient
Danger Background
Danger Subtle Background
Light Background Gradient
Light Background
Light Subtle Background
Dark Background Gradient
Dark Background
Dark Subtle Background
.bg-body
.bg-black
.bg-white
.bg-transparent

Borders


Subtel Colors

Primary
Subtel
Secondary
Subtel
Success
Subtel
Info
Subtel
Warning
Subtel
Danger
Subtel
Light
Subtel
Dark
Subtel

Regular Colors

Primary
Secondary
Success
Info
Warning
Danger
Light
Dark

Emphasis Colors

Primary
Emphasis
Secondary
Emphasis
Success
Emphasis
Info
Emphasis
Warning
Emphasis
Danger
Emphasis
Light
Emphasis
Dark
Emphasis

Auxiliary

Black
White

Widths

border-1
border-2
border-3
border-4
border-5

Roundness

rounded-0
rounded-1
rounded-2
rounded-3
rounded-4
rounded-5

Tables

Color Class
Default .table
Primary .table-primary
Secondary .table-secondary
Success .table-success
Info .table-info
Warning .table-warning
Danger .table-danger
Light .table-light
Dark .table-dark

Striped Rows

Primary (.table-primary)
First Row
Second Row
Third Row
Active Row
Secondary (.table-secondary)
First Row
Second Row
Third Row
Active Row
Success (.table-success)
First Row
Second Row
Third Row
Active Row
Info (.table-info)
First Row
Second Row
Third Row
Active Row
Warning (.table-warning)
First Row
Second Row
Third Row
Active Row
Danger (.table-danger)
First Row
Second Row
Third Row
Active Row
Light (.table-light)
First Row
Second Row
Third Row
Active Row
Dark (.table-dark)
First Row
Second Row
Third Row
Active Row

List Groups

Current Link Second Link Disabled Link

Glass Beta

Something Anthony is working on and testing out

Color (name) & Transparency (%) (Blur is 20%)

Primary 0%
Primary 10%
Primary 20%
Primary 30%
Primary 40%
Primary 50%
Primary 60%
Primary 70%
Primary 80%
Primary 90%
Primary 100%
Secondary 0%
Secondary 10%
Secondary 20%
Secondary 30%
Secondary 40%
Secondary 50%
Secondary 60%
Secondary 70%
Secondary 80%
Secondary 90%
Secondary 100%
Success 0%
Success 10%
Success 20%
Success 30%
Success 40%
Success 50%
Success 60%
Success 70%
Success 80%
Success 90%
Success 100%
Info 0%
Info 10%
Info 20%
Info 30%
Info 40%
Info 50%
Info 60%
Info 70%
Info 80%
Info 90%
Info 100%
Warning 0%
Warning 10%
Warning 20%
Warning 30%
Warning 40%
Warning 50%
Warning 60%
Warning 70%
Warning 80%
Warning 90%
Warning 100%
Danger 0%
Danger 10%
Danger 20%
Danger 30%
Danger 40%
Danger 50%
Danger 60%
Danger 70%
Danger 80%
Danger 90%
Danger 100%
Light 0%
Light 10%
Light 20%
Light 30%
Light 40%
Light 50%
Light 60%
Light 70%
Light 80%
Light 90%
Light 100%
Dark 0%
Dark 10%
Dark 20%
Dark 30%
Dark 40%
Dark 50%
Dark 60%
Dark 70%
Dark 80%
Dark 90%
Dark 100%

Blur (%) & Transparency (px) (Color is Primary)

0% 0px
0% 1px
0% 2px
0% 3px
0% 4px
0% 5px
0% 6px
0% 7px
0% 8px
0% 9px
0% 10px
10% 0px
10% 1px
10% 2px
10% 3px
10% 4px
10% 5px
10% 6px
10% 7px
10% 8px
10% 9px
10% 10px
20% 0px
20% 1px
20% 2px
20% 3px
20% 4px
20% 5px
20% 6px
20% 7px
20% 8px
20% 9px
20% 10px
30% 0px
30% 1px
30% 2px
30% 3px
30% 4px
30% 5px
30% 6px
30% 7px
30% 8px
30% 9px
30% 10px
40% 0px
40% 1px
40% 2px
40% 3px
40% 4px
40% 5px
40% 6px
40% 7px
40% 8px
40% 9px
40% 10px
50% 0px
50% 1px
50% 2px
50% 3px
50% 4px
50% 5px
50% 6px
50% 7px
50% 8px
50% 9px
50% 10px
60% 0px
60% 1px
60% 2px
60% 3px
60% 4px
60% 5px
60% 6px
60% 7px
60% 8px
60% 9px
60% 10px
70% 0px
70% 1px
70% 2px
70% 3px
70% 4px
70% 5px
70% 6px
70% 7px
70% 8px
70% 9px
70% 10px
80% 0px
80% 1px
80% 2px
80% 3px
80% 4px
80% 5px
80% 6px
80% 7px
80% 8px
80% 9px
80% 10px
90% 0px
90% 1px
90% 2px
90% 3px
90% 4px
90% 5px
90% 6px
90% 7px
90% 8px
90% 9px
90% 10px
100% 0px
100% 1px
100% 2px
100% 3px
100% 4px
100% 5px
100% 6px
100% 7px
100% 8px
100% 9px
100% 10px

Animations

Online Examples

Animation #0

No Animation

Animation #1

Thursday

Animation #2

SunnyMornings

Animation #3

GreatThinkers

Animation #4

ReadySetGo

Animation #5

Signal&Noise

Animation #6

BeautifulQuestions

Animation #7

RealityIsBroken

Animation #8

Hi!

Animation #9

CoffeeMornings

Animation #10

DominoDreams

Animation #11

HelloGoodbye

Animation #12

ANewProduction

Animation #13

RisingStrong

Animation #14

FindYourElement

Animation #15

OutNow

Animation #16

MadeWithLove

Page Dividers

None

Wave

Waves

Triangle

Tilt

Arrow

Grunge

Paint