Typography


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

bold italic stroke underline small

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Muted text color looks like this

Success text color looks like this

Warning text color looks like this

Error text color looks like this


RIGHT

CENTER

LEFT

Buttons


Inputs




Colors


SUCCESS
ERROR
WARNING

Grids


Flex

Length of an element equals [element number]/[total]

1/2
1/2

2/3
1/1

Vanilla

1
11

Mobile only
6
6

Desktop only
6
6

Lists


Standard list


Nested list

Table


ID Name Status Location
One Two Three Four
One Two Three Four
One Two Three Four

Cards


ATTENTION: No material guidelines used, we chose the shadow we think is the best for card.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
text between cards
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
footer with link

Extras


Tooltip test 
          .class {
  value: "Hello World";
  big: "there is a ton of content here (just pretend)";
}

Icons


Added font-awesome cdnjs for you to add and use icons. Here is the link:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css
Just add this to your head element

Scrollbars


Loaders