Color Headers Text Size Text Format Text Alignment Containers Width Spacing Flex Boxes Grid System Form Elements Effects Animations
⇡
⚑

## Color Palette

##### Brand Colors

Main
Secondary
Dark
Light

##### Status Colors

Primary
Success
Info
Warning
Danger

##### Basic Colors

Black
Brown
Grey
Blue
Purple
Green
Red
Orange
Yellow
Cyan
White

#### Text Color

Main
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Secondary
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Grayscale
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Basic color
Brown
Green
Blue
Yellow
Red
Purple
Cyan
Status color
Primary
Success
Info
Warning
Danger
Contrast
Light
Dark

#### Background Color

Main
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Secondary
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Grayscale
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Basic color
Brown
Green
Blue
Yellow
Red
Purple
Cyan
Status color
Primary
Success
Info
Warning
Danger
Contrast
Light
Dark

#### Border Color

Main
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Secondary
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Grayscale
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Basic color
Brown
Green
Blue
Yellow
Red
Purple
Cyan
Status color
Primary
Success
Info
Warning
Danger
Contrast
Light
Dark

#### On Hover Color

Mouse over on every item to view effect using the Main color. All other palettes and colors are usable.
Text
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Background
Lightest
Lighter
Light
Base
Dark
Darker
Darkest
Border
Lightest
Lighter
Light
Base
Dark
Darker
Darkest

## Headers and Titles

#### Displays

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6

#### Headers

# Header 1

## Header 2

### Header 3

#### Header 4

##### Header 5

###### Header 6

## Text Size

Hugest
Huger
Huge
Highest
Higer
High
Biggest
Bigger
Big
Regular
Small
Smaller
Tiny

## Text Format

(Nunito) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique mvitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Poppins) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Bold) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Italic) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Uppercase) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(Truncate) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

(No selectable) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

Text with currency symbol (Euro): 185.25

Text with currency symbol (Dollar): 185.25

Text between parenthesis: Luctus odio vehicula sed pellentesque tristique sagittis.

Text between keys: Luctus odio vehicula sed pellentesque tristique sagittis.

#### Unordered List

- Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
- Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
- Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.

- Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
- Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
- Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.

- Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
- Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
- Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.

#### Ordered List

1. Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
2. Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
3. Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.

1. Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
2. Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
3. Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.

1. Rhoncus congue tempus augue commodo litora mollis scelerisque mi. Accumsan blandit vestibulum justo class fermentum senectus. Pretium mauris interdum at phasellus class elementum quam tristique lacus nulla fames.
2. Feugiat dui vel consequat ante suscipit purus elementum per fringilla cubilia sodales.
3. Dictumst faucibus orci cubilia mi taciti fames lorem. Pellentesque malesuada sollicitudin ut habitant fringilla odio tristique.

#### Quotes

> Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

> Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

> Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.

#### Links

Link Main style
Link Decoration style
Link Secondary style
Link Light style
Link Dark style

#### Block Decorators

### Header with underline decorator

### Header with square decorator

### Header with pipe decorator

## Text Aligment

(Left) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

(Center) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

(Right) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

(Justify) Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat. Maximus nibh scelerisque sed sem libero quisque. Rhoncus tristique vitae ultrices enim leo faucibus eleifend sem torquent suspendisse. Dictum pretium molestie dui id suspendisse. Gravida amet lorem habitasse velit netus.Luctus odio vehicula sed pellentesque tristique sagittis. Purus justo condimentum eu letius penatibus volutpat.

## Containers

container
container fluid (Always 100%)

## Width

#### Relative (%)

5%
10%
15%
20%
25%
50%
65%
75%
90%
100%

#### Fixed (rem)

5 rem
10 rem
20 rem
33 rem
42 rem
50 rem

## Spacing

#### Margin

m-a-[0-20]
m-t-[0-20]
m-r-[0-20]
m-b-[0-20]
m-l-[0-20]
m-x-[0-20]
m-y-[0-20]

#### Padding

p-a-[0-20]
p-t-[0-20]
p-r-[0-20]
p-b-[0-20]
p-l-[0-20]
p-x-[0-20]
p-y-[0-20]

## Flex Boxes

#### Flex Direction

##### Column

Item 1
Item 2
Item 3
Item 4

##### Column Reverse

Item 1
Item 2
Item 3
Item 4

##### Row

Item 1
Item 2
Item 3
Item 4

##### Row Reverse

Item 1
Item 2
Item 3
Item 4

#### Justify Content

##### Start

Item 1
Item 2
Item 3
Item 4

##### Center

Item 1
Item 2
Item 3
Item 4

##### End

Item 1
Item 2
Item 3
Item 4

##### Space Between

Item 1
Item 2
Item 3
Item 4

##### Space Evenly

Item 1
Item 2
Item 3
Item 4

##### Space Around

Item 1
Item 2
Item 3
Item 4

#### Align Items

##### Start

Item 1
Item 2
Item 3
Item 4

##### Center

Item 1
Item 2
Item 3
Item 4

##### End

Item 1
Item 2
Item 3
Item 4

#### Wrap Items

##### Wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

##### No Wrap

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

##### Wrap Reverse

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8

## Grid System

#### Basic

col-3
col-3
col-3
col-3

#### Offset

col-3 col-offset-2
col-7

#### Responsive

col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3

#### No Gutters

col-3
col-3
col-3
col-3

#### Cols and Rows

col-12 row-1
col-6 row-2
col-6 row-1
col-4 row-1
col-4 row-2
col-4 row-1
col-3 row-1
col-3 row-1
col-3 row-2
col-3 row-1

## Form Elements

### Input

#### Size

Small
Normal
Large

#### Color

##### Brand Colors

Main
Secondary
Light
Dark

##### Status Colors

Primary
Success
Info
Warning
Danger

##### Basic Colors

White
Black
Grey
Brown
Green
Blue
Yellow
Red
Purple
Orange
Cyan

#### States

Rounded
Disabled
Read only
Password

### Select

#### Size

Small
Normal
Large

#### Color

##### Brand Colors

Main
Secondary
Light
Dark

##### Status Colors

Primary
Success
Info
Warning
Danger

##### Basic Colors

White
Black
Grey
Brown
Green
Blue
Yellow
Red
Purple
Orange
Cyan

#### States

Rounded
Disabled

### Textarea

#### Size

Small
Normal
Large

#### Color

##### Brand Colors

Main
Secondary
Light
Dark

##### Status Colors

Primary
Success
Info
Warning
Danger

##### Basic Colors

White
Black
Grey
Brown
Green
Blue
Yellow
Red
Purple
Orange
Cyan

#### States

Rounded
Disabled
Read only This is a sample text

### Checkbox

#### Size

Small
Normal
Large

#### Color

##### Brand Colors

Main
Secondary
Light
Dark

##### Status Colors

Primary
Success
Info
Warning
Danger

##### Basic Colors

White
Black
Grey
Brown
Green
Blue
Yellow
Red
Purple
Orange
Cyan

#### States

Disabled
Checked

### Radio

#### Size

Small
Normal
Large

#### Color

##### Brand Colors

Main
Secondary
Light
Dark

##### Status Colors

Primary
Success
Info
Warning
Danger

##### Basic Colors

White
Black
Grey
Brown
Green
Blue
Yellow
Red
Purple
Orange
Cyan

#### States

Disabled
Checked

### Buttons

#### Size

Small
Normal
Large

#### Color

##### Brand Colors

Main
Secondary
Light
Dark
Main Outline
Secondary Outline
Light Outline
Dark Outline

##### Status Colors

Primary
Success
Info
Warning
Danger
Primary Outline
Success Outline
Info Outline
Warning Outline
Danger Outline

##### Basic Colors

White
Black
Grey
Brown
Green
Blue
Yellow
Red
Purple
Orange
Cyan
White Outline
Black Outline
Grey Outline
Brown Outline
Green Outline
Blue Outline
Yellow Outline
Red Outline
Purple Outline
Orange Outline
Cyan Outline

#### States

Rounded
Disabled
Block Button

## Effects

#### Grayscale

#### Blur

#### Drop Shadow

#### Box Shadow

#### Tint White

#### Border Solid

#### Border Dotted

#### Border Dashed

#### Border Round

#### Remove Border

## Animations

Click on every item to view animation

#### Appears

Appears no move
Appears to top
Appears to right
Appears to bottom
Appears to left

#### Disappears

Disappears no move
Disappears to top
Disappears to right
Disappears to bottom
Disappears to left

#### Reveals

Reveals to top
Reveals to right
Reveals to bottom
Reveals to left

#### Un-reveals

Un-reveals to top
Un-reveals to right
Un-reveals to bottom
Un-reveals to left

#### Spin

Spin animation
Spin reverse animation
Spin loop
Spin loop reverse

#### Other animations

Zoom animation
Blur animation
Unblur animation
Click animation
Blink animation
Floating animation