{% extends "wagtailadmin/base.html" %} {% load wagtailadmin_tags compress i18n static gravatar %} {% block extra_css %} {% compress css %} {% endcompress %} {% endblock %} {% block titletag %}{% trans 'Styleguide' %}{% endblock %} {% block bodyclass %}styleguide{% endblock %} {% block content %} {% trans "Styleguide" as title_trans %} {% include "wagtailadmin/shared/header.html" with title=title_trans %}

Contents

Colour palette

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

  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

Regular listing TD Regular listing TD

Unpublished TD with title class

Regular listing TD Regular listing TD

TD with title class

Regular listing TD Regular listing 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

Regular listing TD Regular listing TD

Disabled TD with title class

Regular listing TD Regular listing TD

TD with title class

Regular listing TD Regular listing TD

Pagination

{% include "wagtailadmin/shared/pagination_nav.html" with items=fake_pagination linkurl="wagtailadmin_explore" %}

Buttons

button button-secondary yes no / serious bicolor with icon button-small bicolo button-small mixed 1 mixed 2
button on a div

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

Forms

    {% for field in example_form %} {% if field.name == 'file' %} {% include "wagtailimages/images/_file_field.html" %} {% elif field.name == 'date' %} {% include "wagtailadmin/shared/field_as_li.html" with input_classes="iconfield icon-date" %} {% else %} {% include "wagtailadmin/shared/field_as_li.html" %} {% endif %} {% endfor %}
  • {% trans "Delete image" %}

TODO: Date picker

TODO: Time picker

TODO: Datetime picker

TODO: Rich text input

TODO: Page chooser

TODO: Image chooser

TODO: Document chooser

TODO: Snippet chooser

Page editor

Tabs

Tabs are currently only used following headers, where they often appear merged with the bottom of the header:

{% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}

Tabs can also indicate errors:

{% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}

Misc formatters

Avatar icons

Gravatar set

Gravatar not set

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

Icons

{% endblock %} {% block extra_js %} {% endblock %}