Design system one pager

This one-pager is a single page with all the design elements on it, used for import into design programs. Please be aware of the page templates we use.

This section aims to show all styles used on normal website pages, and how to enter them in the admin. It'll contain italicised text, some strong or bolded text, and links should be shown too. This first paragraph is entered just by typing text into the Main Content / Page Body field. 

A heading at level 2

When entering headings (Formats / Headings in the visual editor), it's important for accessibilty and consistency to use the correct levels:

• Each page should have one heading level 1
• The next level of heading used throughout the page should be heading level 2
• To break of a section under a heading level 2, heading level 3 should be used
• And so on..

Heading levels in action

The following are examples of the heading levels, just to show the styles.

This heading is a level 3

If you’re treated as a public patient, Medicare pays for your treatment and care while you are in hospital and for follow-up care from your treating doctor.

A heading at level four

For private patients in a public or private hospital, Medicare pays 75% of the Schedule fee for services and procedures that your doctor provides. If your doctor charges more than the Schedule fee, your health fund may pay the gap fee or you may have to pay it yourself. You will also be charged for hospital accommodation and items such as operating theatre fees and medicines. Private health insurance may cover some or all of these costs, depending on your policy. You may also have to pay an excess to your health fund, depending on the type of hospital cover you have.

A heading at level 5

For private patients in a public or private hospital, Medicare pays 75% of the Schedule fee for services and procedures that your doctor provides. If your doctor charges more than the Schedule fee, your health fund may pay the gap fee or you may have to pay it yourself. You will also be charged for hospital accommodation and items such as operating theatre fees and medicines. Private health insurance may cover some or all of these costs, depending on your policy. You may also have to pay an excess to your health fund, depending on the type of hospital cover you have.

We'll try no to use these level 6 headings

Same as heading level 2, but pick the right heading level: Formats / Headings / Heading 6.

Buttons

A link that looks like a button

To enter a button like above, insert a normal link, and in the link add/edit window, in the "class" field, select "Call To Action - Yellow Button".

A link that looks like a button

To enter a button like above, insert a normal link, and in the link add/edit window, in the "class" field, select "Call To Action - Blue Button".

Standard HTML styles

Lists

This is a bullet point list:

• Item 1
• Item 2 
• A last item here

And a numbered list:

1. Item number 1
2. A second item
3. And a third item here

Blockquotes

Blockquotes like this are added via the visual edit by clicking a paragraph and selecting Formats / Blocks / Blockquotes

Tables

This table will have no styles applied to it. It'll just be a normal table. Note that we can apply styles for special cases, so this is just a vanilla table.

Special content elements

Some paragraph copy to space out the special elements - it'll normally be like that.

Here once more is some paragraph text, just to break up the parts of the page. Here once more is some paragraph text, just to break up the parts of the page. Here once more is some paragraph text, just to break up the parts of the page.

Download boxes

These download boxes are for highlighting download files. The first is flexible, but you need to keep it udpated. The second draws from the resource system so is less flexible in what you see here, but is updated automatically when the resource is updated in the resource system.

Resource system file

Add a "Download Highlight Resource" widget, and enter the Text ID of the resource you want to link to.

Videos

We do videos in a standard sort of format so they're all consistent, responsive etc. They all come from YouTube. Here's an example and how to add one:

1. Add an image (don't forget your alt text)
2. Link it (click it to hightlight, then click the link icon from the visual editor)
3. Add the Embed link from YouTube (click the share icon in YouTube)
4. Add the class "lightBoxVideo" to the link

Widgets

A list of all widgets is on the widgets page. If you're adding a widget, we recommend checking this page.

Read the widgets list and what they do.

Here are a few of the widgets:

Accordion

Add a "Content element or block" of HTML (click the icon [four squares and a plus]) and select "Accordion Content". Update the copy, being careful not to remove the boxes showing the "ACCORDION TITLE" and "ACCORDION CONTENT".

Examples are shown below:

Content Title

Content Title

Tabs

x

Images

Tiles throughout the site will start to use a 16x9 ratio. Images should be made at 400 x 225px. This ensures they look good on large mobile, but aren't huge in file size. It is expected that file size can be kept to less than ~20kb per image.

Forms

The following form does not work. Forms usually just load a new message or web page on submission (after submitting data / sending any emails). This form is just to show how the different elements look.