heading 1: The quick brown fox jumps over the lazy dog

heading 2: The quick brown fox jumps over the lazy dog

heading 3: The quick brown fox jumps over the lazy dog

heading 4: The quick brown fox jumps over the lazy dog

heading 5: The quick brown fox jumps over the lazy dog
heading 6: The quick brown fox jumps over the lazy dog

subheading 1: The quick brown fox jumps over the lazy dog

subheading 2: The quick brown fox jumps over the lazy dog

subheading 3: The quick brown fox jumps over the lazy dog

subheading 4: The quick brown fox jumps over the lazy dog

subheading 5: The quick brown fox jumps over the lazy dog
subheading 6: The quick brown fox jumps over the lazy dog

This page allows you to review typographic formatting for this website. This directly relates to the areas that are editable in the Content Management System. While the options and configurations are endless, most websites require the following minimum elements:

Below is a variety of styles that you may use in your SilverStripe Content Management System. The styles should look the same (or similar) in your Content Management System as they do on this page. Special formats are interspersed with a paragraph as this is a more normal typographic setting than having heading after heading after heading. Each start of a new section will tell you what to look for. Make sure to also check for the within paragraph formatting.

It is important to remember that the page below only focusses on typography (writing) and not on the design of the page as a whole (e.g. where the menu goes, how wide the page is, etc...)



These are horizontal lines



Bold, italic, underline, and links

Paragraph with images and linked images

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum aliquam ipsum nec rutrum. Donec posuere blandit sapien, a gravida enim feugiat sit amet. Integer non risus vel tortor egestas egestas id ut mauris. Donec purus ipsum, lobortis quis malesuada posuere, ornare a nibh. Cras pretium, neque sit amet porta ultricies, metus nisi vulputate ante, in pulvinar elit mi ac urna. Integer pretium consequat enim in viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer sollicitudin, massa at dictum vulputate, eros odio adipiscing est, sit amet molestie turpis odio a enim. Donec rhoncus auctor mauris, vitae viverra odio condimentum vel. In lectus odio, posuere semper lobortis sed, dictum eget felis. Vivamus pharetra urna a risus molestie vehicula consequat sapien lacinia. In in purus eget mauris fringilla placerat.

Maecenas in ante et erat malesuada elementum. Aliquam erat volutpat. Nunc pulvinar congue arcu, a tempor augue condimentum eget. Quisque ac tortor a turpis tempus vulputate. Maecenas id odio non purus luctus dictum. Sed ut nisi sit amet diam pharetra ultricies eu id dui. Maecenas varius ligula ut sem tristique eu facilisis diam feugiat. Donec quis aliquam diam. Proin aliquam, quam quis suscipit volutpat, odio neque condimentum sapien, eget scelerisque nulla metus in elit. Phasellus commodo erat eu mi porttitor accumsan. In hac habitasse platea dictumst. Sed placerat sapien id eros varius id interdum nulla dignissim. Nam risus quam, molestie at rutrum nec, pellentesque eu quam. In hac habitasse platea dictumst. Donec ipsum ligula, congue luctus rutrum ut, blandit vitae diam. In sit amet neque nisi, vitae scelerisque massa. Fusce aliquet aliquet libero, vel elementum augue vulputate eu. Nulla eget dolor pulvinar sem imperdiet porta sed quis leo. Quisque sit amet sem ut nisi aliquam varius et et dolor. Phasellus laoreet ultrices leo non dictum. In in purus eget mauris fringilla placerat.

Cras ipsum ligula, porttitor sit amet posuere sed, fermentum a diam. Aenean varius lectus sit amet purus cursus malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a sem nec mi gravida volutpat id non risus. Aenean elementum venenatis erat, a semper augue eleifend a. Integer faucibus purus vitae nisl vestibulum sit amet bibendum velit venenatis. Sed elit tortor, scelerisque sed bibendum ut, gravida dignissim ante. Phasellus sit amet sem ac dolor faucibus luctus. Quisque in nunc nec orci commodo sodales. Donec molestie viverra ligula, sit amet consequat velit placerat vel. Morbi sed justo augue, id mattis quam. Pellentesque blandit magna ut sem commodo vitae sodales sapien convallis. Donec tempor tellus et neque iaculis sodales. Sed viverra, leo nec molestie euismod, diam quam semper quam, vel lacinia nunc lacus id nisi. Etiam pulvinar arcu vel nibh bibendum ac consequat nunc pharetra. Donec dapibus justo eu nisl tempor auctor. Curabitur in nisl felis. Sed vehicula, lorem quis mollis vestibulum, erat tortor blandit mi, vestibulum molestie erat turpis id dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec facilisis nisi vel est vestibulum quis dapibus ante auctor. Fusce elementum, eros vitae luctus ornare, sem nibh egestas elit, et scelerisque dui nibh quis nunc. Sed facilisis ante vel nisi tristique a bibendum lorem scelerisque. Donec augue nibh, euismod consectetur suscipit ac, mollis et turpis. Proin vitae mi nibh. Vestibulum velit nisi, hendrerit sit amet sodales in, tempus sollicitudin felis. In in purus eget mauris fringilla placerat.

Example of Heading 1

This is an example of a couple of left-align paragraphs with bold, underlined, and italics in it. It also contains some inline formatting styles (such as bold and italics - see below) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. justo quam fermentum ligula, vel hendrerit est sem a orci.

Example of Heading 2

Below is an unordered (bulleted) list within a list...

Elements within elements...

Example of Heading 3

Below is an ordered (numbered) list:

  1. Cras luctus fringilla lorem. Donec scelerisque augue non orci.
  2. Phasellus felis nunc, mollis nec, laoreet a, facilisis a, dui. Vivamus venenatis malesuada tortor. Curabitur aliquam sapien ac risus. Integer elementum. Vestibulum ornare felis sed quam. Donec tempor scelerisque nisi. Nulla facilisi. Donec porttitor. Morbi et sapien.
  3. In feugiat consectetuer lectus. Cras lacinia elit nec libero.
    1. In feugiat consectetuer lectus. Cras lacinia elit nec libero.
    1. In consectetuer lectus. Cras nec libero.
      1. In feugiat consectetuer lectus. Cras lacinia elit nec libero.
        1. In feugiat consectetuer lectus. Cras lacinia elit nec libero.
        1. In feugiat consectetuer lectus. Cras lacinia elit nec libero.
        1. In feugiat consectetuer lectus. Cras lacinia elit nec libero.
      1. In feugiat consectetuer lectus. Cras lacinia elit nec libero.
  4. Sed id ante in nisi faucibus tristique. Suspendisse laoreet.

Vivamus id diam nec quam bibendum dapibus. Nam non nunc ac metus dapibus varius. Phasellus tempor metus nec quam ornare tempor. Maecenas vitae ligula. Maecenas id mi. Mauris ut justo.

Example of Heading 4

Below is an example of a simple table. There is a myriad of more sophisticated formatting you can apply to tables. Shown here are cell headings and standard cells.

table col heading 1 + row heading 0 table heading 1 table heading 2 table heading 3
table row heading 1 cell 1

paragraph in a cell

  • list item in a cell
  • list item in a cell
  • list item in a cell
table row heading 2 cell 1

paragraph in a cell Sed augue purus, sagittis et, bibendum quis, tincidunt ut, risus.

cell 3
table row heading 3 cell 1 cell 2 cell 3
Example of Heading 5 - other formats

Here are some examples of other formats. Firstly, here is the address format (you will have to add linebreaks):

The Addressee
PO Box 1234
Postal Town 5555
New Zealand / Aotearoa
Here is an example of the pre-formatted tag.  This is used for things like computer code and recipes.

Donec mollis, libero et porttitor imperdiet, est lorem pulvinar libero, id commodo quam mi vitae elit. Quisque ac odio id ante semper tincidunt. Quisque ultrices eros egestas augue. Sed augue purus, sagittis et, bibendum quis, tincidunt ut, risus. Ut gravida sodales nisi. Morbi pede.

Block quote below (for a larger quote)...

Ut vulputate ante. Maecenas nec est. Nullam id leo in sapien commodo hendrerit. Nam tincidunt augue quis neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lobortis. In ante nunc, consequat non, placerat vel, auctor ac, magna. In eget mi. Sed hendrerit. Integer fringilla, metus in adipiscing venenatis, nisi metus scelerisque magna, id fringilla dolor diam ac ligula. Nulla consequat nunc id sem.

And here is some quoted text (for a smaller quote)

Ut vulputate ante. Quote goes here Maecenas nec est. Nullam id leo in sapien commodo hendrerit. Nam tincidunt augue quis neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lobortis. In ante nunc, consequat non, placerat vel, auctor ac, magna. In eget mi. Sed hendrerit. Another quote here... Integer fringilla, metus in adipiscing venenatis, nisi metus scelerisque magna, id fringilla dolor diam ac ligula. Nulla consequat nunc id sem.

Example of Heading 6

Here is an example of a centered paragraph. Duis libero enim, dapibus sed, iaculis et, rutrum ac, metus. Donec convallis molestie risus. Etiam ut diam at tellus consequat euismod. Nullam odio tortor, cursus quis, interdum eu, faucibus quis, enim. Suspendisse eros mi, porta sit amet, luctus a, malesuada non, ligula. Nam velit lectus, ultrices id, vestibulum id, malesuada id, lectus. Aliquam erat. Etiam facilisis. Vivamus lorem lectus, fringilla at, rutrum vel, suscipit non, velit. Nullam lorem neque, suscipit ac, faucibus ut, dictum a, enim. Phasellus vestibulum augue et tellus. Suspendisse sollicitudin sem vitae magna. Sed dignissim nisi eget odio. Nullam massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed tortor. Aenean tellus est, bibendum non, fringilla in, eleifend vitae, erat.

Example of Heading 6

Here is an example of a right-aligned paragraph. Duis libero enim, dapibus sed, iaculis et, rutrum ac, metus. Donec convallis molestie risus. Etiam ut diam at tellus consequat euismod. Nullam odio tortor, cursus quis, interdum eu, faucibus quis, enim. Suspendisse eros mi, porta sit amet, luctus a, malesuada non, ligula. Nam velit lectus, ultrices id, vestibulum id, malesuada id, lectus. Aliquam erat. Etiam facilisis. Vivamus lorem lectus, fringilla at, rutrum vel, suscipit non, velit. Nullam lorem neque, suscipit ac, faucibus ut, dictum a, enim. Phasellus vestibulum augue et tellus. Suspendisse sollicitudin sem vitae magna. Sed dignissim nisi eget odio. Nullam massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed tortor. Aenean tellus est, bibendum non, fringilla in, eleifend vitae, erat.