Typography
fontSize

Classes:

.fontSize-megajumbo
.fontSize-jumbo
.fontSize-largest
.fontSize-larger
.fontSize-large
.fontSize-base
.fontSize-small
.fontSize-smaller
.fontSize-smallest

  • megajumbo 84
    jumbo 54
  • largest 44
  • larger 34
  • large 22
  • base 18
  • small 16
  • smaller 14
  • smallest 13

Heading

fontWeight

Classes:

.fontWeight-thin
.fontWeight-light
.fontWeight-semibold
.fontWeight-bold

  • thin 100
  • light 300
  • semibold 600
  • bold 700
fontColor

Classes:

.fontColor-secondary
.fontColor-terciary
.fontColor-negative
.fontColor-dashboard

  • Secondary color
    Terciary color
    Color dashboard
Workable widget

Classes:

.whr-info
.whr-description
.whr-title
.whr-date

  • whr-description
    whr-title
Text colors

Classes que alteram somente a cor do texto:

.text-success
.text-error
.text-waiting
.text-success-small-only

  • Success
  • Error
    Waiting
lineHeight

Classes:

.lineHeight-tightest
.lineHeight-tighter
.lineHeight-tight
.lineHeight-base
.lineHeight-loose
.lineHeight-looser

  • Tightest – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum . Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Tighter – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum . Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Tight – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum . Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Base – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum . Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Loose – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum . Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Looser – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum . Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraphs

Todos os parágrafos tem sempre 20px de margem bottom

FontSize-base – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum . Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FontSize-small – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FontSize-smaller – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

FontSize-smaller – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Tables and lists
Table

Classes:

.table
.project_img
.user_img

List

Classes:

.list-item-inline

Utility classes
Margins

Classes:

.u-marginBottom-10
.u-marginBottom-20
.u-marginBottom-30
.u-marginBottom-40
.u-marginBottom-60
.u-marginBottom-70
.u-marginBottom-80

.u-marginTop-10
.u-marginTop-20
.u-marginTop-30
.u-marginTop-40

Text align

Classes:

.u-text-center
.u-text-center-small-only
.u-text-center-big-only

Float

Classes:

.u-right
.u-right-big-only
.u-left

Display setting

Classes:

.inline-block

Round and radius

Classes:

.u-radius
.u-round

Colors
Primary 
Blue One
#3f4752
Blue Two
#79808b
Gray One
#f1f4f4
Green Button
#00b22d
Blue Note
#409bff
Message light
Blue Note 10%
Red note
#e86666
Buttons
Primary 

Classes:

.btn

Modificadores de tamanho:
.btn-large
.btn-medium
.btn-small

Modificadores de estilo:
.btn-dark
.btn-edit
.btn-fb
.btn-tweet
.btn-secondary
.btn-secondary-dark
.btn-terciary
.btn-message

Modificador de largura:
.btn-inline

Botão extra:
.btn-category
     .filters
     .double-line

Main header buttons

Classes:

.header-link

Form elements
Text input

Classes:

.field-label
.text-field

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Text input negative

Classes:

.text-field.negative

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Dropdown
Text input with field help

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Postfix and prefix

Classes:

.postfix
.prefix
.no-hover

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Text area

Classes:

.text-field
.text-field.big
.text-field.jumbo

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Validation feedback

Classes:

.text-field.error

. This is some text inside of a div block.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Native select

Classes:

.text-field

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

Radio and checkbox
Pagination
  • 1
  • 2
  • 3
  • 4
  • 5
  • Next
Feedback
Feedback block
Elements
Thumb

Classes:

.thumb
.thumb
.thumb.small
.thumb.big
.thumb-project

.thumb .big
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
.thumb
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
.thumb .small
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
.thumb-author
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
com u-round
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
com u-round
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
com u-round
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
com u-round
54d1c1e0f70fc7eb4477e9e6_avatar.jpg
Card

Classes:

.card


Modificadores:

.card-secondary
.card-user
.card-notification
.card-reward
.card-error
.card-message

Card project
Um título de projeto com um nome grande pra caramba
Nova linha de óculos de serragem desenvolvida a partir do reaproveitamento dos resíduos gerados na produção dos óculos Zerezes!
37%
R$455.555
Levantados
27 dias
Restantes
Badges

Classes de span

.badge

Modificadores:
.badge-attention
.badge-share
.badge-gone
.badge-success

badge
badge-attention
badge-share
badge-gone
badge-success
Pages
Home
Project maker
Dashboard Approved
Dashboard Online