Style Guide

This guide acts as a technical reference for all the design elements that make up the Barnard Levit website. It ensures a consistent design and provides the common CSS and HTML used.

For enquries regarding the technical design and build contact GPMD.

Typography

This is an h1 Heading

This is an h2 Heading

This is an h3 Heading

This is an h4 Heading

This is an h5 Heading
This is an h6 Heading

This is some lead body copy. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

This is some body copy. Donec id elit non mi porta gravida at eget metus. This is a hyperlink. Donec ullamcorper nulla non metus auctor fringilla. This is some bold text. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. This is some italicised text. Sed posuere consectetur est at lobortis.

  • This is an unordered list
  • Lorem ipsum dolor sit amet
    • Phasellus iaculis neque
    • Vestibulum laoreet porttitor sem
  • Consectetur adipiscing elit
  1. This is an ordered list
  2. Cras mattis consectetur purus sit amet fermentum
  3. Praesent commodo cursus magna, vel scelerisque
  4. Nullam quis risus eget urna mollis ornare
  5. Donec id elit non mi porta gravida at eget metus

This is some fine print. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

This is a blockquote. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

This is a blockquote source attribution
Description List
This is a horizontal description list.
Bibendum Malesuada Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Pellentesque Fermentum Mattis
Etiam porta sem malesuada magna mollis euismod.

Tables

# Column One Column Two Column Three
1 Dapibus Nullam Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
2 Euismod Vestibulum Maecenas sed diam eget risus varius blandit sit amet non magna.
3 Elit Purus Nullam id dolor id nibh ultricies vehicula ut id elit.

Forms

Form Legend

Images

Sample Pic 1

This is an image caption.

Video

Sub-Nav

The sub-nav accordion can go to five levels deep. In order to support touch devices accordion sections can be opened and closed using the icons to the right. Clicking on a link takes you to the linked page.

Gallery