Styling Guide

Text in a blue box like this that has padding has the class “highlight” for the blue and “box” for the padding. These classes are added to the Text Block settings. You can have multiple classes as long as they are separated by a space. Screenshot

Text in a blue box like this that has padding has the class “highlight” for the blue and “box” for the padding. These classes are added to the Text Block settings. You can have multiple classes as long as they are separated by a space. Screenshot

If you want the content of the row to be narrower then you need a new row and you then add the class “narrow-content”. Screenshot

Instead of the default white background, you can have gray. You can add the class “section-alt” to the row to get the entire row/section to have the gray background color.

This content section (the specific Text Block settings) also has the class “box” still.

By default, the content will have a bottom padding which may look odd in some situations. To fix this, you can add the class “no-bottom” to the Text Block settings.

To add a line between rows/sections then add the class “section-border” to the row.

By default, rows do not have top or bottom padding. You can add this padding by adding a class to the row.

“section-padded” adds padding to both the top and bottom of the row.

“section-padded-bottom” adds padding only to the bottom.

“section-padded-top” adds padding only to the top.

Column 1

This section has the class “highlight” for the blue and “box” for the content padding. These classes are added to the Text Block Settings.

Column 2

This section has the class “section” for the gray and “box” for the content padding. These classes are added to the Text Block Settings.

To add a blockquote (item with the big quotation mark), simply add a Text Block

Add the text

Highlight the text and click the blockquote option.  Don’t forget to ‘Save Changes’ and then ‘Update’ the page. Screenshot

Note: this section (the row) also has the class “section-border” and “section-padded”

Heading 1

Heading 2

Heading 3

Heading 4
Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint


Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint

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

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

  • Unordered list
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  1. Ordered list
  2. item 2
  3. item 3
  4. item 4
  5. item 5
  6. item 6

Heading 3

lightstock_57774_medium_user_471999Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint

lightstock_57774_medium_user_471999Lorem ipsum dolor sit amet, consectetur adipisicing 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.


Add the class “narrow-content” to the row if you want the row to have a smaller fixed width

First Tab

Tabby ipsum dolor sit amet, kitty sunbathe dolor mauris a tristique, feed me nullam stuck in a tree ac faucibus bibendum libero. Jump on the table accumsan et vestibulum fluffy fur pussy libero.

Second Tab

Lay down in your way catnip stuck in a tree iaculis, sunbathe orci turpis kittens scratched dolor quis nunc. Vestibulum cras nec attack sniff eat, tempus enim ut adipiscing scratched orci turpis give me fish.

Third Tab

Jump sleep in the sink vestibulum climb the curtains attack, sleep on your face sniff attack your ankles etiam give me fish judging you. Sagittis run zzz jump elit nibh, sunbathe enim rip the couch vulputate accumsan.