Typography & Helpers

Basic Tags

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

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

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

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

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

p
Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Ordered List

ul.iconlist.fa-check-square

  • Item 1
  • Item 2
  • Item 3

Available Classes

  • .fa-caret-right
  • .fa-caret-square-o-right
  • .fa-hand-o-right
  • .fa-check
  • .fa-check-circle
  • .fa-check-circle-o
  • .fa-check-square
  • .fa-check-square-o
  • .fa-circle
  • .fa-circle-o
  • .fa-circle-thin
  • .fa-square
  • .fa-square-o
  • .fa-info
  • .fa-info-circle
  • .fa-list

Misc

blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe, Whale Inc.

pre (code)

#myclass {
    font-size: 16px;
}

Classes

Font Size Class:
.fs13 .fs14 .fs16 .fs20 .fs22 .fs24 .fs26 .fs28

Font Weight Class:
.fw300 .fw400 .fw500 .fw600 .fw700

Letter Spacing Classes:
.ls0 .ls1 .ls2 .ls3 .ls4 .ls5

Font Family:
.font-body .font-primary .font-secondary

Height:
.noheight .nolineheight .vertical-middle (It seems editor did a typo!)

Case:
.uppercase .lowercase .capitalize .nott

Text Align:
.tright .tleft .center

Float:
.fright .fleft .fnone

Hide:
.ohidden (It seems editor did a typo!)

Line:
.line .double-line .line.line-sm .line.line-xs

Color:
.color .bgcolor .border-color .nobg (none) .nobgcolor (transparent)

Highlight:
highlight

Dropcap:
Dropcap

Sample: p.fs18.fw300
Lorem ipsum dolor sit amet, consectetur adipiscing 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 dolorin reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Margin/Padding Classes

Available Margin Classes

  • .allmargin
  • .leftmargin
  • .rightmargin
  • .topmargin
  • .bottommargin
  • .clear-bottommargin
  • .allmargin-xs
  • .leftmargin-xs
  • .rightmargin-xs
  • .topmargin-xs
  • .bottommargin-xs
  • .clear-bottommargin-xs
  • .allmargin-sm
  • .leftmargin-sm
  • .rightmargin-sm
  • .topmargin-sm
  • .bottommargin-sm
  • .clear-bottommargin-sm
  • .allmargin-lg
  • .leftmargin-lg
  • .rightmargin-lg
  • .topmargin-lg
  • .bottommargin-lg
  • .clear-bottommargin-lg
  • .nomargin
  • .noleftmargin
  • .norightmargin
  • .notopmargin
  • .nobottommargin

Available Padding Classes

  • .nopadding
  • .noleftpadding
  • .norightpadding
  • .notoppadding
  • .nobottompadding

Values

  • Base: 50px
  • XS: 10px
  • SM: 30px
  • Large: 50px