Skip to main content

Design styleguide

Last updated: 2022-05-20
Caution

Sometimes it's necessary to flag a page. This can be done (sparingly) using a caution admonition with an appropriate title.

This styleguide intends to provide examples of all available content styles, and offer guidance on how to use them.

Text styles

Heading level two

Heading level three

Heading level four

Heading level five
Heading level six

This is a basic paragraph. You'll need to see the paragraph spanning multiple lines to get a sense of the line height. Obviously standard text can also include emphasised text or bold text, all achieved using appropriate Markdown styling.

Details

The details block is typically used to show extended content, with meaningful, clickable text to expand the extra information. However, it is not supported in Markdown and therefore must be implemented using HTML.

Be familiar with relevant terms and other related information
  • Information that is helpful in context but not so important that it breaks the page flow
  • Content that might be new to some people but known to others
  • Standard terms such as this, that or the other
  • References with key meanings such as them and those things
  • Other contextual material that is helpful but not necessarily critical

Callout styles

Callout boxes (aka 'Admonitions') are typically used to highlight short content snippets amongst lengthier content.

Maecenas faucibus mollis interdum. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.

Note title

This is a note callout. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna.

Tip title

This is a tip callout. Vestibulum id ligula porta felis euismod semper.

Donec sed odio dui. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor.

Info title

This is an info callout. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper.

Caution title

This is a caution callout. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.

Legacy content

The content on this page has been migrated from an older system and is due to be rewritten.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue.

Warning title

This is a warning callout. Donec ullamcorper nulla non metus auctor fringilla.