Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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.

ThisIsHowWeBreakReallyHuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuggggggggggggggggggggggggggggeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeContentIntoSmallPieces

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

Grids

Flex

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

Old System (last support)

Lists

Standard list

• This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
• This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
• This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
  • This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
  • Inner position This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.

Inner list

• This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
• This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
• This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
  • This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.
  • Outer position This is a pretty long text that needs to be splitted into two lines on the most devices, so we can see how the text behaves on multiple lines in a simple list.

Table

Cards

ATTENTION: Keep in mind we don't want to use the material guidelines, we choosed the shadow we think is the best one for a card.

Hello World

Extras

          .class {
  value: "Hello World";
  big: "This is some really huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuugggggggggggggggggggggggggeeeeeeeeeeeeeeeeeee content";
}