This is an h1

This is an h2

This is an h3

This is an h4

This is an h5

This is a paragraph

• These are
• items in an
• unordered list

1. These are
2. items in an
3. ordered list

This is an example of code

Help text is not to be confused with the messages that appear in a banner drop down from the top of the screen. Help text are permanent instructions, visible on every page view, that explain or warn about something.

table listing

Heading 1	Heading 2	Heading 3
TD with title class	Standard TD	Standard TD
Unpublished TD with title class	Standard TD	Standard TD
TD with title class	Standard TD	Standard TD

ul listing

• List item

• List item

• List item

ul listings with multiple columns

• Something here

  Something else
• Something here

  Something else
• Something here

  Something else

Listings used for choosing a list item

Heading 1	Heading 2	Heading 3
TD with title class	Standard TD	Standard TD
Disabled TD with title class	Standard TD	Standard TD
TD with title class	Standard TD	Standard TD

Do not use <input type="button"> use <button type="button"></button> instead. This addresses inconsistencies between rendering of buttons across browsers.

Buttons must have interaction possible (i.e be an input or button element) to get a suitable hover cursor.

Basic buttons

button link button element

Basic buttons (small)

button link button element

Secondary buttons

button link button element

Secondary buttons (small)

button link button element

Disabled buttons

Important: Adding disabled as a class should be avoided on buttons, instead use the disabled attribute. Some examples below use classes to validate existing styling still works.

button link button element button secondary

Disabled buttons (small)

button link button element button secondary

Bi-color icon buttons with text

Note that input elements are not supported by any icon buttons.

button link button element button disabled

Bi-color secondary icon buttons with text

button link button element button disabled

Bi-color icon buttons with text (small)

button link button element button disabled

Bi-color secondary icon buttons with text (small)

button link button element button disabled

Icon buttons without text

button link button element

Icon buttons without text (small)

button link button element

Negative

Should not be used with .button-secondary on the same element.

No link No button No disabled

Negative (small)

No No Disabled

Buttons with internal loading indicators

Currently only button elements are supported.

Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.

Click me 5s Disabled until 20s after load Click me 5s Click me 5s

Buttons where the text is replaced on click

Click me 5s

Mixtures

A proper button A link button button link

Styleguide

Styleguide

Search term

button

• Text*

  help text
• Auto height text*
• Default rich text*
• Url*
• Email*
• Date*
• Time*
• Datetime*
• Select*

  choice 1 choice 2 that is longer but pretty normal
• Long select*

  choice 1 choice 2 that is longer but pretty normal choice 3 that has a very long label that it cannot possibly fit within the width of the parent container but we're going to test it anyway to see what happens and how it wraps and whether it breaks the layout or not
• Radio select*

  choice 1

  choice 2 that is longer but pretty normal

  choice 3 that has a very long label that it cannot possibly fit within the width of the parent container but we're going to test it anyway to see what happens and how it wraps and whether it breaks the layout or not
• Multiple select*

  choice 1 choice 2 that is longer but pretty normal choice 3 that has a very long label that it cannot possibly fit within the width of the parent container but we're going to test it anyway to see what happens and how it wraps and whether it breaks the layout or not
• Multiple checkbox*

  choice 1

  choice 2 that is longer but pretty normal

  choice 3 that has a very long label that it cannot possibly fit within the width of the parent container but we're going to test it anyway to see what happens and how it wraps and whether it breaks the layout or not
• Boolean
• Switch
• Disabled switch
• Page chooser*

  Choose a page
• Image chooser*

  Choose an image
• Document chooser*

  Choose a document
• Snippet chooser*

  Choose page
• SaveDelete image

Tabs

Tabs can also indicate errors:

 

Avatar icons

Avatar normal

Avatar square

Avatar small

Status tags

Loading mask

Add the following div around any items you wish to display with a spinner overlay and fading out

Remove the "loading" class to disable the effect

Image transparency

It can be useful to show users the transparent areas of images. Add a transparency checkerboard with the .show-transparency on the img or svg tag thus: