Grid

Small grid example to play with, see the README for more information.


o-col-2 o-col-4--md o-col-6--lg
o-col-2 o-col-4--md o-col-6--lg
o-col-2 o-col-4--md o-col-6--lg
o-col-2 o-col-4--md o-col-6--lg
o-col-12 o-col-6--md o-col-3--lg
o-col-12 o-col-6--md o-col-3--lg
o-col-12 o-col-6--md o-col-3--lg
o-col-12 o-col-6--md o-col-3--lg

Push / Pull

o-col-5 u-push-7 u-push-0--md
o-col-6 u-pull-5 u-pull-0--md

Pre / Post

o-col-5 u-pre-1 u-pre-0--md
o-col-4 u-pre-2 o-col-6--md u-pre-1--md

Fonts

Titillium Web

Helvetica Neue

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Links

link


Donec id elit non mi regular link at eget metus. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac this is a link ac, vestibulum at eros.

Text styles

Date text: March 29th


Intro text: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.


Regular text: Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Overlay text: Curabitur imperdiet enim id.

Responsive spacing

u-margin-{direction}--xlg

u-margin-{direction}--lg

u-margin-{direction}--md

u-margin-{direction}--sm

u-margin-{direction}--xs

SVG Shapes

Layer 1

brand/apple

brand/google-play

icons/chevron-right

social/facebook

social/google-plus

social/instagram

social/linkedin

social/twitter

social/youtube-full

social/youtube