Simplicity

It's Simple, Nothing Less and Nothing More

Color Utilities:


Text Colors:

Primary Color

Secondary Color

Tertiary Color

Quaternary Color

Warning Color

Danger Color

Success Color

Dark 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%
0%

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

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

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

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:
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Dots Loader:
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Bars Loader:
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Pulse loaders:
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loader Speeds:
Loading...
Loading...
Loading...
Loading...
Loading...

Grid System


Column Column Column

Forms


Esto es un error en un input

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