Skip to main content

Text

Default / No Class

.text--default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

In in nisi quis nibh lacinia posuere pulvinar sed libero. Mauris dui diam, porttitor sed egestas et, venenatis sed erat. Cras consectetur ut dolor eget tempor. Morbi quis nisl posuere, scelerisque magna nec, placerat eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Large

.text--lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

In in nisi quis nibh lacinia posuere pulvinar sed libero. Mauris dui diam, porttitor sed egestas et, venenatis sed erat. Cras consectetur ut dolor eget tempor. Morbi quis nisl posuere, scelerisque magna nec, placerat eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Small

.text--sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

In in nisi quis nibh lacinia posuere pulvinar sed libero. Mauris dui diam, porttitor sed egestas et, venenatis sed erat. Cras consectetur ut dolor eget tempor. Morbi quis nisl posuere, scelerisque magna nec, placerat eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

X-Small

.text--xs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

Subtitle

.text--subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec euismod tellus. Donec dignissim diam sed lectus rhoncus varius.

Color Wheel

  • White #fff
  • Gray 100 #e5e5e5
  • Gray 200 #dddddd
  • Gray 300 #c4c4c4
  • Gray 400 #aeb0b5
  • Gray 500 #626262
  • Gray 600 #464646
  • Gray 700 #36393B
  • Gray 800 #1f1f1f
  • Gray 900 #0f0f0f
  • Black #000
  • Red
  • Blue
  • Purple
  • Orange
  • Yellow
  • Green

Headings

Heading Fonts

Structure Class Ex.
Primary Font .heading--primary

Example

Primary Secondary .heading--secondary

Example

Standard Sizes

Structure Class Ex.
Heading X-Large .heading--xl

Example

Heading Large .heading--lg

Example

Heading Medium .heading--md

Example

Heading Small .heading--sm

Example

Heading X-Small .heading--xs

Example

Jumbo Sizes

Structure Class Ex.
Jumbo Large .heading--jumbo-lg

Example

Jumbo Medium .heading--jumbo-md

Example

Jumbo Small .heading--jumbo-sm

Example

Icons

Name Default Inverse Transparent Light
account
airplane
arrow
bar
category
checkmark
climate
dollar
facebook
fees
filter
gplus
headset
heart
instagram
lock
mail
map
message
nightlife
paw
pencil
phone
pin
pinterest
search
services
snorkel
twitter
user
water

Form Fields

Text Input

Radio


Checkbox

Text Area

Submit