TYPOGRAPHY & STYLES
On this page are examples of the different typographical styles that are pre-set to mix-and-match for the Glenbrook website. 

 

H1  - Main Titles

 

The H1 style is used for the main page title - it can also be used for more than one title on the page if you want them to have equal weight (ie: like on the News & Views page) . The H1 title style looks best when only 50% or less of the page width. You can use a space block if needed to reduce it's width by dragging and dropping it to the right of the heading so the heading and the spacer block are "columns" in the same "row".


H2 - second level sub-headings 

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Bold - third level sub-headings
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. 


Bold + Italic -- is an additional style used throughout the site.

Regular italic -- any text in italics has it's font changed to a serif font. Some of the quotes have been styled in simple italics, so that other quotes/text around it can have more attention.


Quotes -- in the text block formatting toolbar there is a quote button that can be used to style text in a way that calls it out and highlights it. I prefer using this method to style quotes instead of the quote block - one reason being that the quote block does not allow you to add links in the text. 

To make a bulleted list, simply start typing your text and then highlight it and click the "unordered list" button in the formatting toolbar (it is to the right of the numbered list button). Hit return on your keyboard to start a new item in the list. Hit return twice to start a new regular paragraph after your list.

  • list item 1
  • list item 2
  • list item 3

Standard links are darker and have a dotted underline. While the button links like the sample below are created by first selecting the text and applying the H3 heading style, and then clicking the link button in the toolbar to set the link.

Grey Button Link


The buttons below are created by adding a "Button Block" to the page. When adding the button block you can change the button settings to make it large, medium or small size, and left, center or right aligned.


Spacer blocks are handy when you need to add space between one block or row of content and another. They can also be placed to the left or right of another content block to create horizontal space.

Horizontal Rule blocks are handy to add a horizontal border to help break up content. Often it is nice to add a space block and then a horizontal rule block to separate one area of content from another.