Styleguide

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

Header

Styleguide

Styleguide

Forms

  • help text
  • Delete image

Page editor

Tabs

Tabs can also indicate errors:

Progress indicators

60%

 

50%

Misc formatters

Avatar icons

Avatar normal

Avatar square

Avatar small

Status tags

status tag primary
status tag secondary
status tag label

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:

Icons

register_icons entries from wagtailfontawesomesvg/solid
Visual Name Source File path
suitcase None wagtailfontawesomesvg/solid/suitcase.svg
utensils None wagtailfontawesomesvg/solid/utensils.svg
register_icons entries from wagtailadmin/icons
Visual Name Source File path
angle-double-left None wagtailadmin/icons/angle-double-left.svg
angle-double-right None wagtailadmin/icons/angle-double-right.svg
arrow-down Custom icon wagtailadmin/icons/arrow-down.svg
arrow-right-full right-long (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/arrow-right-full.svg
arrow-left Custom icon wagtailadmin/icons/arrow-left.svg
arrow-right Custom icon wagtailadmin/icons/arrow-right.svg
arrow-up Custom icon wagtailadmin/icons/arrow-up.svg
arrows-up-down None wagtailadmin/icons/arrows-up-down.svg
bars bars (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/bars.svg
bin trash-can (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/bin.svg
bold bold (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/bold.svg
breadcrumb-expand Custom icon wagtailadmin/icons/breadcrumb-expand.svg
calendar calendar (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/calendar.svg
calendar-alt calendar-days (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/calendar-alt.svg
calendar-check calendar-check (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/calendar-check.svg
chain-broken None wagtailadmin/icons/chain-broken.svg
check check (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/check.svg
circle-check circle-check (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/circle-check.svg
circle-plus circle-plus (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/circle-plus.svg
circle-xmark circle-xmark (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/circle-xmark.svg
clipboard-list clipboard-list (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/clipboard-list.svg
code code (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/code.svg
cog gear (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/cog.svg
cogs gears (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/cogs.svg
copy clone (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/copy.svg
collapse-down Custom icon wagtailadmin/icons/collapse-down.svg
collapse-up Custom icon wagtailadmin/icons/collapse-up.svg
comment comment-dots (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/comment.svg
comment-add Custom icon wagtailadmin/icons/comment-add.svg
comment-add-reversed Custom icon wagtailadmin/icons/comment-add-reversed.svg
cross xmark (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/cross.svg
crosshairs crosshairs (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/crosshairs.svg
cut scissors (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/cut.svg
date calendar-day (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/date.svg
decimal Custom icon wagtailadmin/icons/decimal.svg
desktop desktop (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/desktop.svg
doc-empty-inverse file (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/doc-empty-inverse.svg
doc-empty file (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/doc-empty.svg
doc-full-inverse file-lines (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/doc-full-inverse.svg
doc-full file-lines (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/doc-full.svg
dots-vertical None wagtailadmin/icons/dots-vertical.svg
dots-horizontal ellipsis (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/dots-horizontal.svg
download download (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/download.svg
draft Custom icon wagtailadmin/icons/draft.svg
edit pen (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/edit.svg
ellipsis-v None wagtailadmin/icons/ellipsis-v.svg
expand-right Custom icon wagtailadmin/icons/expand-right.svg
error circle-xmark (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/error.svg
folder-inverse folder (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/folder-inverse.svg
folder-open-1 folder-open (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/folder-open-1.svg
folder-open-inverse folder-open (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/folder-open-inverse.svg
folder folder (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/folder.svg
form rectangle-list (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/form.svg
globe globe (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/globe.svg
grip Custom icon wagtailadmin/icons/grip.svg
group user-group (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/group.svg
h1 Custom icon wagtailadmin/icons/h1.svg
h2 Custom icon wagtailadmin/icons/h2.svg
h3 Custom icon wagtailadmin/icons/h3.svg
h4 Custom icon wagtailadmin/icons/h4.svg
h5 Custom icon wagtailadmin/icons/h5.svg
h6 Custom icon wagtailadmin/icons/h6.svg
help circle-question (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/help.svg
history clock-rotate-left (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/history.svg
home house (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/home.svg
horizontalrule None wagtailadmin/icons/horizontalrule.svg
image image (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/image.svg
info-circle circle-info (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/info-circle.svg
italic italic (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/italic.svg
key key (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/key.svg
link link (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/link.svg
link-external up-right-from-square (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/link-external.svg
list-ol list-ol (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/list-ol.svg
list-ul list-ul (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/list-ul.svg
lock-open lock-open (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/lock-open.svg
lock lock (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/lock.svg
login right-to-bracket (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/login.svg
logout Custom icon wagtailadmin/icons/logout.svg
mail envelope (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/mail.svg
media circle-play (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/media.svg
minus minus (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/minus.svg
mobile-alt mobile-screen-button (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/mobile-alt.svg
no-view eye-slash (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/no-view.svg
openquote quote-left (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/openquote.svg
order-down arrow-down (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/order-down.svg
order-up arrow-up (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/order-up.svg
order arrow-down-1-9 (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/order.svg
password key (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/password.svg
pick star (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/pick.svg
pilcrow paragraph (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/pilcrow.svg
placeholder circle-chevron-down (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/placeholder.svg
plus-inverse circle-plus (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/plus-inverse.svg
plus plus (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/plus.svg
radio-empty circle (regular): Font Awesome Pro 6.4.0 wagtailadmin/icons/radio-empty.svg
radio-full circle (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/radio-full.svg
redirect diamond-turn-right (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/redirect.svg
regex Custom icon wagtailadmin/icons/regex.svg
repeat None wagtailadmin/icons/repeat.svg
reset None wagtailadmin/icons/reset.svg
resubmit right-left (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/resubmit.svg
rotate rotate (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/rotate.svg
search magnifying-glass (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/search.svg
site earth-americas (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/site.svg
snippet leaf (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/snippet.svg
spinner spinner (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/spinner.svg
strikethrough strikethrough (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/strikethrough.svg
success circle-check (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/success.svg
subscript subscript (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/subscript.svg
superscript superscript (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/superscript.svg
table table (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/table.svg
tablet-alt tablet-screen-button (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/tablet-alt.svg
tag tag (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/tag.svg
tasks list-check (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/tasks.svg
thumbtack thumbtack (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/thumbtack.svg
thumbtack-crossed Custom icon wagtailadmin/icons/thumbtack-crossed.svg
tick-inverse square-check (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/tick-inverse.svg
time clock (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/time.svg
title heading (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/title.svg
undo None wagtailadmin/icons/undo.svg
upload upload (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/upload.svg
user user (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/user.svg
view eye (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/view.svg
wagtail-inverse Custom icon wagtailadmin/icons/wagtail-inverse.svg
wagtail-icon Custom icon wagtailadmin/icons/wagtail.svg
warning triangle-exclamation (solid): Font Awesome Pro 6.4.0 wagtailadmin/icons/warning.svg