Fork me on GitHub

minima.

Typography

We use rem unit based on the html font-size. 1.6 is the default line-height. We are using Roboto font-family, provided by Google Fonts.

https://fonts.googleapis.com/css?family=Roboto:300,300i,500,500i,700,700i

Heading h1 4.6rem (46px)

Heading h2 3.6rem (36px)

Heading h3 2.8rem (28px)

Heading h4 2.2rem (22px)

Heading h5 1.8rem (18px)
Heading h6 1.6rem (16px)

Blockquote

Make quotes from somewhere with blockquote.

Hello dear. This is our blockquote element

Hello dear. This is our blockquote element with the .blockquote--primary modifier.

Hello dear. This is our blockquote element with the .backquote--bg background modifier for more highlight.

Hello dear. This is our blockquote element with the .blockquote--primary modifier and the .backquote--bg background modifier for more highlight.

Hello dear. This is our blockquote element with the .blockquote--inverted modifier. Everything should be black and white.

Buttons

Finally, buttons. Enjoy it.

Regular

Outline

Alerts

Warn people, show messages or what ever you need.

Title and other content type

Cards

Put some content. Use .card to organize your layouts.

Regular Cards

Simple 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.

Go to Home

A card with a header :)

This is a card example with a .card__header element. Useful for show a more organized content.

The primary card header. Shocking.

This is a card example with a .card__header element and .card--primary modifier. Useful for show some information with more highlight.

Run to the hills Cancel

The inverted card header. Shocking.

This is a card example with a .card__header element and .card--inverted modifier. Useful for show some information with more highlight.

Run to the hills Cancel

Regular Colored Cards

The .card--ok

Should I stay or should I go?

The .card--bad

Should I stay or should I go?

The .card--warn

Should I stay or should I go?

Text Cards

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Simple

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

And Primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Inverted

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Yay! It worked

Lorem ipsum doloctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Something went wrong.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

Oops, my warning

Image Cards

Uma imagem impressionante

Yay! It worked

Lorem ipsum doloctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Uma imagem impressionante

Random image will show up here.

Uma imagem impressionante

Lorem ipsum doloctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Bottom Cards

Lorem ipsum doloctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Uma imagem impressionante

Super AWESOME image. Right?

Uma imagem impressionante

Yay! It worked

Lorem ipsum doloctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Uma imagem impressionante