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.

  • This is a bullet list
    • 2nd tier
      • 3rd tier

Images plus captions

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

this is media and text block with caption to the side. you can customize size and color.

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

And a citation

This is a large quote

And a citation

Pull Quotes

This is a default pull quote

And a citation

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