Styleguide

Contents

Typography

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

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.

This is help text that might be just for information, explaining what happens next, or drawing the user's attention to something they're about to do

It could be multiple lines

A warning message might be output in cases where a user's action could have serious consequences.
A critical message would probably be rare, in cases where a particularly brittle or dangerously destructive action could be performed and needs to be warned about.

Listings

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

ul listings with multiple columns

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

Pagination

Buttons

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

Basic buttons (small)

button link

Secondary buttons

button link

Secondary buttons (small)

button link

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

Disabled buttons (small)

button link

Bi-color icon buttons with text

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

button link

Bi-color secondary icon buttons with text

button link

Bi-color icon buttons with text (small)

button link

Bi-color secondary icon buttons with text (small)

button link

Icon buttons without text

button link

Icon buttons without text (small)

button link

Negative

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

No link

Negative (small)

No

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.

Buttons where the text is replaced on click

Mixtures

A link button button link

Dialogs

Forms

  • help text
  • Delete image

Page editor

Tabs

Tab 1
Tab 2

Tabs can also indicate errors:

Tab 1
Tab 2

Progress indicators

60%

 

50%

Misc formatters

Avatar icons

Avatar normal

Avatar square

Avatar small

Status tags

Primary tag
Secondary tag

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

Wagtail

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 tag thus:

Wagtail

SVG Icons

  • wagtail
  • wagtail-inverse
  • cogs
  • doc-empty-inverse
  • doc-empty
  • edit
  • arrow-up
  • arrow-down
  • search
  • cross
  • folder-open-1
  • folder-inverse
  • mail
  • arrows-up-down
  • lock (locked)
  • lock-open (unlocked)
  • arrow-right
  • doc-full / file-text-alt
  • image / picture
  • doc-full-inverse
  • draft
  • folder
  • plus
  • tag
  • folder-open-inverse
  • clipboard-list
  • tasks
  • cog
  • tick
  • user
  • arrow-left
  • tick-inverse
  • plus-inverse
  • snippet
  • bold
  • italic
  • undo
  • history
  • repeat
  • list-ol
  • list-ul
  • link
  • link-external
  • superscript
  • subscript
  • strikethrough
  • radio-full
  • radio-empty
  • arrow-up-big
  • arrow-down-big
  • group
  • media
  • horizontalrule
  • password
  • download
  • duplicate
  • download-alt
  • upload
  • order
  • grip
  • home
  • order-down
  • order-up
  • bin
  • spinner
  • pick
  • redirect
  • view
  • no-view
  • collapse-up
  • collapse-down
  • comment
  • help
  • warning
  • error
  • success
  • date
  • time
  • form
  • site
  • placeholder
  • pilcrow
  • title
  • code
  • openquote
  • chain-broken
  • table
  • login
  • logout
  • thumbtack
  • resubmit
  • uni52