Skip to content. | Skip to navigation.

Navigation

Our styles

Page descriptions appear in search results. They need to be worded thoughtfully, so they can make it easier for people to decide whether an item will be useful.

Level 1 headings

Level 1 headings (h1) are the main headings used within a page. They appear in an automated in-page contents list, when that feature is turned on. Headings should be short and "front-loaded" - the first three words should be the most important words in the heading. 

Subheadings

Level 2 headings (h2) also appear in an automated in-page contents list, when that feature is turned on. Subheadings should also be short and "front-loaded". The automated in-page contents list is turned on for this page.

This is an h3 heading...

And this is an h4 heading, which we sometimes use...

This is an h5 heading, which we hardly ever use...
And h6 is even rarer. Now we're deeply in Pure CSS styles...

Discreet text

We use the discreet style for text that needs to be smaller than the surrounding text.

It is perfect for footnotes on a page, and notes below a table. Use "<p class="discreet">".

Pullquotes

This paragraph is here to show how a pull-quote looks when surrounded by normal text. Pullquotes are marked by "<blockquote class="pullquote">".

Pull-quote style

Pullquotes have their own line but they are not right-aligned. Right-alignment does not hold up well on smaller screens.

Callouts

Call-out style

 

Blockquote style 1 2 3 4 testing testing testing

Character style: highlight

Literal style

We use the literal style (which can include a link) very rarely. 

The "literal" style relies on "<pre>" tags. It does not stand out well from surrounding text. Usually, the "callout" style is a better choice.

Other styles needed

Also need a style setting for the related content, page updated, and page top. See very bottom of this page.

Testing table classes: Style name (HTML class), and when we use it

Fancy listing (listing), used for text because it is left-aligned by default
Row one Text Even row
Row two Text Odd row
Row three Text Even row

 

Fancy grid listing (grid listing), for financial data because it is right-aligned by default
Row one with link Numbers Even row
Row two with link Numbers Odd row
Row three Numbers Even row

  

Subdued grid (plain), used for recommendations in reports
Row one Text  Even row
Row two Text Odd row
Row three Text Even row

 

Fancy vertical listing (vertical listing), our default and former style
Row one Text Even row
Row two Text Odd row
Row three Text Even row

 

Invisible grid (invisible), rarely used
Row one Text Even row
Row two Text Odd row
Row three Text Even row

Font Awesome Icons 

Font Awesome icons (http://fortawesome.github.io/Font-Awesome/ ) can be added almost every where with the following html:

 

<span class="fa fa-OPTIONS fa-ICON"></span>

 

There has to be something inside the span or Plone/TinyMCE will strip the tag out. A normal space suffices. The icons will NOT show up in the TinyMCE editing window. 

The values for the fa-OPTION class (which is optional) can be found at http://fortawesome.github.io/Font-Awesome/examples/ . We most often use fa-2x for larger icons.

Icon names can be found at http://fortawesome.github.io/Font-Awesome/icons/ 

 

Page last updated: 26 June 2015

Related content
About us
page top