Styleguide
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
- These are
- items in an
- 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.
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
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
-
Something else
-
Something else
-
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 |
Styleguide
Styleguide
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:
Visual | Name | Source | File path |
---|---|---|---|
suitcase |
None | wagtailfontawesomesvg/solid/suitcase.svg |
|
utensils |
None | wagtailfontawesomesvg/solid/utensils.svg |
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 |