Color Utilities:

Text Colors:

Primary Color

Secondary Color

Tertiary Color

Quaternary Color

Warning Color

Danger Color

Success Color

Dark Color

Background Colors:

Primary Color

Secondary Color

Tertiary Color

Quaternary Color

Warning Color

Danger Color

Success Color

Dark Color

Light Color

Opacities:

100%

90%

80%

70%

60%

50%

40%

30%

20%

10%

Cards:

Titulo de card

Subitulo de card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla quaerat cumque sit mollitia provident dolor explicabo, minima aperiam est repudiandae nihil a ratione? Ad cum facilis, corrupti fuga recusandae provident.

Card link Card link

Titulo de card

Subitulo de card

Card link Card link

Titulo de card

Subitulo de card

Card link Card link

Buttons:

Solid buttons:

Outlined buttons

Close Button

Button sizes

Typography:

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

h6. Heading

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

Loaders

In order to change the loaders color you need to use the text-[color] utilities or set a color value using css. Because each loader inherits the color from the parent loader selector

Spinner Loader:

Dots Loader:

Bars Loader:

Pulse loaders:

Loader Speeds:

Grid System

Column Column Column

Forms

Tables

Normal Table:

Column 1	Column 2	Column 3	Column 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4

Striped Table:

Column 1	Column 2	Column 3	Column 4	Column 4	Column 4	Column 4
value 1	value 2	value 3	value 4	value 4	value 4	value 4
value 1	value 2	value 3	value 4	value 4	value 4	value 4
value 1	value 2	value 3	value 4	value 4	value 4	value 4
value 1	value 2	value 3	value 4	value 4	value 4	value 4

Bordered Table:

Column 1	Column 2	Column 3	Column 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4

Hoverable Table:

Column 1	Column 2	Column 3	Column 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4
value 1	value 2	value 3	value 4

Flex Box Utilities

Flex Direction:

Flex Row

Item 1

Item 2

Item 3

Flex Row Reverse

Item 1

Item 2

Item 3

Flex Col

Item 1

Item 2

Item 3

Flex Col Reverse

Item 1

Item 2

Item 3

Justify Content:

Justify

Start

Justify

End

Justify

Center

Justify

Between

Justify

Around

Justify

Evenly