Typography

Headings

Heading Example
<h1></h1>

Heading 1
<h2></h2>

Heading 2
<h3></h3>

Heading 3
<h4></h4>

Heading 4
<h5></h5>
Heading 5
<h6></h6>
Heading 6

Headings with line

Class Example
.line

Heading 1
.line--color

Heading 2

General text

Class Example
.text-body-1 Some body text
.text-body-2 Some body text
.text-body-3 Some body text
.text-body-4 Some body text
.text-link Some link

Alignment

Class Example
.text-center
Some text
.text-left
Some text
.text-right
Some text
.text-justify
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla vestibulum neque, eu malesuada neque imperdiet non. Nullam ac ipsum viverra magna posuere varius a nec dolor.

Spacing

Margin

Class Example
.m-{n}
Margin 1
Margin 2
Margin 3
Margin 4
.mt-{n}
Margin top 1
Margin top 2
Margin top 3
Margin top 4
.mb-{n}
Margin bottom 1
Margin bottom 2
Margin bottom 3
Margin bottom 4
.my-{n}
Margin y 1
Margin y 1
Margin y 1
Margin y 1
.mx-{n}
Margin x 1
Margin x 2
Margin x 3
Margin x 4
.m-auto
Margin auto
.mt-auto
Margin top auto
.mb-auto
Margin bottom auto
.ml-auto
Margin left auto
.mr-auto
Margin right auto

Padding

Class Example
.p-{n}
Padding 1
Padding 2
Padding 3
Padding 4
.pt-{n}
Padding top 1
Padding top 2
Padding top 3
Padding top 4
.pb-{n}
Padding bottom 1
Padding bottom 2
Padding bottom 3
Padding bottom 4
.py-{n}
Padding y 1
Padding y 1
Padding y 1
Padding y 1
.px-{n}
Padding x 1
Padding x 2
Padding x 3
Padding x 4

Colors

Class Example
.color-pink-1 Example
.color-pink-2 Example
.color-pink-3 Example
.color-blue-1 Example
.color-blue-2 Example
.color-blue-3 Example
.color-gray-1 Example
.color-gray-2 Example
.color-gray-3 Example
.color-gray-4 Example
.color-gray-5 Example
.color-gray-6 Example
.color-gray-7 Example
.color-gray-8 Example
.color-alert-1 Example
.color-alert-2 Example
.color-alert-3 Example
.color-alert-4 Example
.bg-pink-1
.bg-pink-2
.bg-pink-3
.bg-blue-1
.bg-blue-2
.bg-blue-3
.bg-gray-1
.bg-gray-2
.bg-gray-3
.bg-gray-4
.bg-gray-5
.bg-gray-6
.bg-gray-7
.bg-gray-8
.bg-alert-1
.bg-alert-2
.bg-alert-3
.bg-alert-4

Forms

error Por favor, preencha seu email no formato nome@exemplo.com

error Por favor, preencha seu email no formato nome@exemplo.com

error Por favor, preencha seu email no formato nome@exemplo.com

error Por favor, preencha seu email no formato nome@exemplo.com

error Por favor, preencha seu email no formato nome@exemplo.com

error Campo obrigatório

Descreva para seus apoiadores o que vai ser realizado. Seja simples e direto!

error Campo obrigatório

290/300
Pode ficar tranquilo que vamos ajustar a sua meta com precisão mais para frente. Por enquanto, queremos apenas ter uma noção inicial para te orientar da melhor forma!

Tables

Campanha Arrecadação Visualizações Data de criação Data de fim Status
Festival do Rio R$ 502.000,00 10.850 10/09/2019 11/11/2019
Ativa
Janela Internacional de Cinema... R$ 12.000,00 2.200 10/09/2019 11/11/2019
Cancelada

Icons

https://google.github.io/material-design-icons/

Components

Alerts

Class Example
.alert
Alert
.alert--success
Success!
.alert--error
Error!
.alert--warning
Warning!
.alert--warning-2
Warning 2!
.js-alert-dismissible
Alert dismissible.
OK, DISPENSAR
.alert--message
Lorem ipsum accumsan nullam nam
adipiscing sed conubia.
ENTENDI
.alert--message .alert--arrow-right
Lorem ipsum accumsan nullam nam
adipiscing sed conubia.
ENTENDI

Buttons

Class Example
.button buttons
.button--sm button
.button--lg button
.button--xl button
.button--pink-1 button
.button--pink-2 button
.button--blue-1 button
.button--blue-2 button
.button--outline-pink-1 button
.button--outline-pink-2 button
.button--outline-blue-1 button
.button--outline-blue-2 button
.button--disabled button

Cards

Header Text

lorem ipsum dolor sit amet consectetur adipiscing elit ad cursus malesuada libero dictum ante fringilla hendrerit nostra habitant donec natoque nascetur morbi et auctor conubia faucibus inceptos ex est vel augue montes primis commodo magna blandit eros dui molestie in neque ullamcorper ornare integer egestas a vivamus efficitur gravida rhoncus

ou

lorem ipsum dolor sit amet consectetur adipiscing elit ad cursus malesuada libero dictum ante fringilla hendrerit nostra habitant donec natoque nascetur morbi et auctor conubia faucibus inceptos ex est vel augue montes primis commodo magna blandit eros dui molestie in neque ullamcorper ornare integer egestas a vivamus efficitur gravida rhoncus

Collapsible content

Title expand_more

lorem ipsum dolor sit amet consectetur adipiscing elit ad cursus malesuada libero dictum ante fringilla hendrerit nostra habitant donec natoque nascetur morbi et auctor conubia faucibus inceptos ex est vel augue montes primis commodo magna blandit eros dui molestie in neque ullamcorper ornare integer egestas a vivamus efficitur gravida rhoncus

Pagination

Progress Bar

Class Example
.progress-bar

.progress-bar .progress-bar--md

.progress-bar .progress-bar--sm

Parameters Value Description
id
 id of element Start Progress Bar.
percent
 0 to 100 Set percentage (optional).
Default is 0.
type
 'circle' or 'bar' Set type of progress bar (optional).
Default is 'circle'.
Structure Live Example
<div id="live-example-h" class="progress-bar"> <svg class="svg"> <circle class="svg__circle"/> </svg> <span class="progress-bar__text"></span> </div>
progressBar({
'id':'#live-example-bar'
});
<progress id="live-example-d" class="progress-bar" value="0" max="100"></progress>
progressBar({
'id':'#live-example-h',
'type':'horizontal'
});