Fonts: Roboto

H1: 39px, height 54

H2: 31px, height 43

H3: 25px, height 35

H4: 20px, height 30

H5: 16px, height 28px
H6: 13px, height 23px

Body text 16px, height 28

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus, Regular text Subscript 13px Regularsuperscript 13px lacus at nisl. Integer et laoreet libero. Strikethrough text effect

  • list text 16 px, height 28
    • same text size
      • third tier
  1. numbered list
  2. sequential
    1. 2nd tier
      1. 3rd

CSS Color Classes

These color classes can be appended to certain elements to change their appearance

bold-green
confident-green
calm-green
light-green

bold-blue
confident-blue
calm-blue
light-blue

bold-red
confident-orange
calm-orange
calm-pink

bold-black
confident-grey
light-grey
calm-white (white)


Images

Add CSS class decided-boxed to the block to have the border treatment

Add additional color classes to change the color of the border treatment. This image has classes decided-boxed bold-red

Border treatment on rounded image. This image has classes decided-boxed calm-blue

Wide width image

Full width image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus, purus sed scelerisque fringilla, lorem nisi vestibulum arcu, eu imperdiet lectus lacus at nisl. Integer et laoreet libero. Proin vitae hendrerit augue, vitae cursus augue. Proin diam mauris, fringilla et pretium sit amet, tincidunt congue velit. Duis congue, mi non gravida scelerisque, metus ligula consequat sapien, ac placerat metus augue nec arcu. Pellentesque aliquet est lorem, in tempus augue venenatis ac. Curabitur at auctor arcu. Phasellus posuere nisl sit amet lobortis varius. Integer vel pharetra dui, ut efficitur ipsum. Curabitur vitae lacus id risus dapibus auctor.

Donec quis mauris non odio ornare elementum sagittis id libero. Sed vehicula arcu quam, efficitur tristique sem pulvinar vitae. Suspendisse tristique scelerisque dolor in fermentum. Phasellus cursus dignissim ante, et pretium sem dictum a. Proin efficitur dapibus pharetra. Integer dignissim purus id ipsum aliquet ullamcorper. Nullam sed elit purus. Suspendisse ultricies, turpis sed fringilla consectetur, turpis orci imperdiet sapien, et lobortis lectus risus at turpis. Phasellus eleifend metus a quam egestas, ut porta felis condimentum. Quisque finibus tellus et risus finibus, a lobortis ante cursus. Nam sed est cursus ipsum aliquet commodo. Phasellus placerat, ante quis commodo cursus, lacus mauris iaculis tellus, sit amet sodales quam quam id nibh. Morbi viverra iaculis magna, porta elementum dui. Vivamus ultricies purus metus, id commodo ligula interdum id. Sed tincidunt purus orci, ut malesuada mauris pulvinar eget.

Phasellus dolor nulla, laoreet eu ullamcorper ut, lacinia quis ante. Proin viverra finibus elit. Sed quis arcu hendrerit tellus posuere rhoncus. Sed condimentum pellentesque mauris at tempus. Praesent at sapien a enim varius congue. Sed orci magna, vestibulum eu odio eget, auctor tincidunt erat. Integer in magna imperdiet, elementum quam et, volutpat libero.

Images plus captions

this is the caption text you can customize bold, italic, links – 16px

this is media and text block with caption to the side. you can customize size and color. Default: 36px bold, height 78

Tables

Content
Content
Content

This is a default table block

Header
Content
Content

This table has a header row

Content
Content
Footer

This table has a footer row

Content
Content
Content

This is a striped table block

Header
Content
Content

This table has a header and background color

Content
Content
Footer

This table has a footer row

Header
Content
Content
calm-orange
Content
Content
Footer
calm-blue
HeaderHeaderHeader

Accordion

Accordion title

Here is some content inside the accordion

Accordion title

Here is some content inside the accordion that is hidden by default

Accordion title

Here is some content inside the accordion

Buttons

Videos

Default video block

Video block with border treatment

decided-boxed

Video block with border treatment calm-green

decided-boxed calm-green

Quotes

This is a quote 16px, height 28px weight 500

And a citation 13px, height 23px

This is a large quote 24px height 38px

And a citation

Pull Quotes

This is a default pull quote 32px, height 102, weight 900,

And a citation 13PX, HEIGHT 23, WEIGHT 900

This is a wide width pull quote

And a citation

This is a full width pull quote

And a citation

This is a colored pull quote

And a citation

This is a colored wide width pull quote

And a citation

This is a colored full width pull quote

And a citation

Offsets / Image Hanging

CSS classes can be added to blocks to offset it’s position up, down, left and right. The format is as follows

Bring a block up

To bring an element up, you can add the class

offset-top-negative-50

The 50 at the end represents how many pixels to offset by, and can be any number between 10 and 500, in increments of 10. e.g. 10, 120, 260, 350, etc.

You cannot do 11, 24, 36, it has to be multiple of 10

Hang an image over the following section

To do this you would add a class like

offset-bottom-negative-200

This will bring the following section up 200px underneath the image

By default the following section will overlap the image, so to bring the image forward add this class:

bring-to-front

Which will bring the image up on the z axis

Non negative offsets

You can also add normal margins to blocks, to add more spacing at the bottom of the block and the next block, also to the top, left and right. Examples:

offset-top-50
offset-left-40
offset-right-100
offset-bottom-30

Summary

Classes are in this format

offset-{direction}-{pixels}
offset-{direction}-negative-{pixels}

Here is a heading

Here is another section where the image hangs over