Text - Grid System

Table of contents

Related accessibility topics

Design add-on

Consider adding the color to the text.

Background colours Font colours

Headings

Headings are an important part of the document structure. You can restyle them to compliment the grid layout.

Headings and class names
Class Example
Default style

H2's display like this

H3's display like this

H4's display like this

H5's display like this
H6's display like this

Add a background colour to a heading. Refer to: Background colours

Font Size

Font size options
Class Details Example
font-xxsmall Extra-extra small font (50%) Resulting text size
font-xsmall Extra small font (70%) Resulting text size
font-small Small font (85%) Resulting text size
font-medium Medium (100%) = default size Resulting text size
font-large Large (120%) = same size as an h3 Resulting text size
font-xlarge Extra large (130%) = same size as an h2 Resulting text size
font-xxlarge Extra-extra large font (170%) Resulting text size

Lists

List styling options
Class Example
default <ol>
  1. First level list item defaults to Arabic numerals.
    1. Second level list item defaults to lower-level alpha.
      1. Third level list item defaults to lower-level Roman numerals.
list-bullet-none List without bullets
  • First level list without bullets.
  • First level list without bullets.
    • Second level list without bullets.
List with manually inserted Arabic numerals. Avoid using this style, as it is difficult to maintain, and difficult for users to scan for information.
  • 1. First level list item.
    • 1.1. Second level list item.
      • 1.1.1 Third level list item.
  • 2. First level list item.
List with manually inserted Roman numerals (and acronym tags). Avoid using this style, as it is difficult to maintain, and difficult for users to scan for information.
  • I. First level list item.
    • i.i. Second level list item.
    • i.ii. Second level list item.
    • i.iii. Second level list item.
    • i.iv. Second level list item.
  • II. First level list item.
list-lower-alpha
  1. First level list item defaults to lower-case alpha.
    1. Second level list item also defaults to lower-case alpha. Use a class to override this default setting — to avoid confusing the user.
      1. Third level list item defaults to lower-case Roman numerals.
list-upper-alpha
  1. First level list item defaults to upper-case alpha
    1. Second level list item defaults to lower-case alpha.
      1. Third level list item defaults to lower-case Roman numerals.
  2. First level list item defaults to upper-case alpha.
list-lower-roman
  1. First list item defaults to lower-case Roman numerals.
  2. First level list item defaults to lower-case Roman numerals.
    1. Second level list item defaults to lower-case alpha.
      1. Third level list item defaults back to lower-case Roman numeral. Use a class to override this default setting — to avoid confusing the user.
list-upper-roman
  1. First level list item defaults to uppercase Roman numerals.
  2. First level list item defaults to upper-case Roman numerals.
    1. Second level list item defaults to lower-case alpha.
      1. Third level list item defaults to lower-case Roman numeral.
list-numeric
  1. First level list item
    1. Second level list item
    2. Second level list item
      1. Third level list item
      2. Third level list item
  2. First level list item
wet-boew-zebra

This style has limitations and works best within the module-comment

  • First level list item
  • First level list item
  • First level list item
  • First level list item

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum, dui a laoreet pulvinar, ligula ligula mollis tellus, sed mattis magna sem eu justo. Cras vel neque ipsum, ac hendrerit neque. Curabitur vulputate dictum augue, hendrerit ornare erat euismod eu. Fusce suscipit, tortor vitae mollis tempus, nisi odio tincidunt sem, non fermentum mauris purus vitae augue. Proin vel orci elit, ut commodo enim. Nunc ut mauris quis risus varius eleifend. Vivamus dignissim enim ut tortor congue ullamcorper. Nullam quam odio, faucibus sed tempus a, laoreet faucibus justo. Praesent consequat tincidunt consectetur. Sed hendrerit, enim ut pulvinar tincidunt, turpis tortor luctus quam, ut pulvinar nibh sem nec nisl. Sed magna tortor, laoreet ut congue et, facilisis nec massa. Donec dignissim justo ut sem mattis a egestas ante blandit. Pellentesque ac urna convallis odio consequat placerat. Pellentesque cursus, mi nec tempor egestas, justo lectus fermentum neque, in dapibus nulla tortor in metus. Nullam laoreet erat id orci consectetur sed consequat magna pellentesque.

Curabitur vulputate dictum augue, hendrerit ornare erat euismod eu. Fusce suscipit, tortor vitae mollis tempus, nisi odio tincidunt sem, non fermentum mauris purus vitae augue. Proin vel orci elit, ut commodo enim. Nunc ut mauris quis risus varius eleifend. Vivamus dignissim enim ut tortor congue ullamcorper. Nullam quam odio, faucibus sed tempus a, laoreet faucibus justo. Praesent consequat tincidunt consectetur.

blockquote.float-right

Morbi massa odio, elementum eu accumsan eu, sagittis vitae odio.

Vivamus suscipit dolor vel justo rutrum vitae luctus diam sollicitudin. Pellentesque auctor magna non justo elementum eget facilisis lacus gravida. Morbi massa odio, elementum eu accumsan eu, sagittis vitae odio. Sed sapien metus, commodo mollis tempor ac, pretium sed nulla. Vestibulum mauris leo, egestas et luctus ut, varius ornare nibh. Curabitur eu nunc sed mi adipiscing ultricies. Proin porta ipsum a ipsum auctor bibendum. Suspendisse adipiscing lacus sit amet erat mollis semper. Aliquam nec orci eu lectus vehicula fermentum. Quisque id nunc arcu, sit amet tincidunt arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla at erat massa, eu sagittis est. Ut pulvinar vestibulum auctor. Nunc facilisis posuere libero at tincidunt. Ut vitae dui vel nisl volutpat ullamcorper.

blockquote.float-left

Morbi massa odio, elementum eu accumsan eu, sagittis vitae odio.

Etiam ut odio quis turpis tincidunt pharetra. Donec adipiscing luctus dui cursus molestie. Nullam vehicula sollicitudin justo, quis cursus quam feugiat ut. Ut et tincidunt enim. Nunc est massa, consectetur ut congue at, mattis sed sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dictum sem in nunc lacinia fermentum. Vivamus semper elementum risus ac gravida. Nullam a leo vel velit pretium tristique. In non quam id magna sagittis scelerisque non eu libero. Suspendisse quis risus lobortis leo tempor molestie et mollis massa. Donec auctor, elit in placerat dignissim, massa risus interdum est, ac interdum ipsum dolor id elit. Ut vitae est vel felis luctus rutrum. Quisque ut erat nisi, id rhoncus nibh. Donec sed enim felis, nec tincidunt odio.

wrap-none class

This class prevents content from splitting over multiple lines. Use it mainly when writing something such as a date, phone number or mathematical equation, as this ensures they are easy to read. For example: 

<span class="wrap-none">January 1, 2010</span>

Font family

Choose to alternate between serif or sans-serif fonts.

Serif test text here

Sans-serif test text here

View code 
<p class="font-serif">Serif test text here</p>
<p class="font-sans-serif">Sans-serif test text here</p>