{% extends "wagtailadmin/base.html" %} {% load wagtailadmin_tags i18n %} {% block extra_css %} {{ block.super }} {{ example_form.media.css }} {% 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 icon='image' %}

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

  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.

{% help_block status="info" %}

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

{% endhelp_block %} {% help_block status="warning" %} A warning message might be output in cases where a user's action could have serious consequences. {% endhelp_block %} {% help_block status="critical" %} 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. {% endhelp_block %}

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

{% paginate example_page %}

Buttons

{% icon name='warning' %}Do not use {% filter force_escape|lower %}{% endfilter %} use {% filter force_escape|lower %}{% endfilter %} 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.

{% icon name="plus" wrapped=1 %}button link

Bi-color secondary icon buttons with text

{% icon name="plus" wrapped=1 %}button link

Bi-color icon buttons with text (small)

{% icon name="plus" wrapped=1 %}button link

Bi-color secondary icon buttons with text (small)

{% icon name="plus" wrapped=1 %}button link

Icon buttons without text

{% icon name="cog" %}button link

Icon buttons without text (small)

{% icon name="cog" %}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.

{% icon name='warning' %}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

{% icon name="cog" %}A link button {% icon name="tick" wrapped=1 %}button link

Dialogs

{% dialog_toggle classname='button button-primary' dialog_id='dialog-1' text='Simple dialog' %} {% dialog icon_name="doc-full-inverse" id="dialog-1" title="Simple dialog" subtitle="This is as simple as it gets 😀" %}

This is an example of a simple dialog with an icon_name, title and subtitle passed to the dialog tag

{% enddialog %}
{% dialog_toggle classname='button button-primary' dialog_id='dialog-2' text='Dialog with info' %} {% dialog icon_name="globe" title="Dialog with info" id="dialog-2" subtitle="This is a testing subtitle" message_status="info" message_heading="Here is some info on the thing" message_description="This is a subtext for the message" %}

This dialog message was generated by passing message_status=info as well as message_heading and message_description to the dialog template tag

{% enddialog %}
{% dialog_toggle classname='button button-primary' dialog_id='dialog-3' text='Dialog with success' %} {% dialog icon_name="globe" title="Dialog with success" id="dialog-3" subtitle="This is a testing subtitle" message_status="success" message_heading="Success! You've done the thing" %}

This dialog message was generated by passing message_status=success as well as message_heading to the dialog template tag

{% enddialog %}
{% dialog_toggle classname='button button-primary' dialog_id='dialog-4' text='Dialog with warning' %} {% dialog icon_name="globe" title="Dialog with warning" id="dialog-4" subtitle="This is a testing subtitle" message_status="warning" message_heading="There was an issue with the thing" message_description="This is a subtext for the message" %}

This dialog message was generated by passing message_status=warning as well as message_heading and message_description to the dialog template tag

{% enddialog %}
{% dialog_toggle classname='button button-primary' dialog_id='dialog-5' text='Dialog with error' %} {% dialog icon_name="globe" title="Dialog with critical error" id="dialog-5" subtitle="This is a testing subtitle" message_status="critical" message_heading="There was an issue with the thing" message_description="This is a subtext for the message" %}

This dialog message was generated by passing message_status=critical as well as message_heading and message_description to the dialog template tag

{% enddialog %}
{% dialog_toggle classname='button button-primary' dialog_id='dialog-6' text='Floating dialog' %} {% dialog theme="floating" icon_name="doc-full-inverse" id="dialog-6" title="Floating dialog" subtitle="This is a testing subtitle" %}

This dialog allows other page content to be seen

{% enddialog %}

Forms

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

Page editor

Tabs

{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-1' title='Tab 1' %} {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-2' title='Tab 2' %}

Tabs can also indicate errors:

{% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-1' title='Tab 1' errors_count='5' %} {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-2' title='Tab 2' errors_count='55' %}

Progress indicators

60%

 

50%

Misc formatters

Avatar icons

{% avatar %} Avatar normal

{% avatar size="square" %} Avatar square

{% avatar size="small" %} Avatar small

Status tags

{% status "status tag primary" classname="primary" %}
{% status "status tag secondary" %}
{% status "status tag label" classname="status-tag--label" %}
{% status "status tag link" url="https://wagtail.org/" title="wagtail.org" hidden_label="current status" classname="primary" %}

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

{% endblock %} {% block extra_js %} {{ block.super }} {% include "wagtailadmin/pages/_editor_js.html" %} {{ example_form.media.js}} {% endblock %}