{% 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' %}
This is a paragraph
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.
{% 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 %}table
listingHeading 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
listingul
listings with multiple columnsHeading 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 |
These can also have an inverted theme:
This is an example of a simple dialog with an icon_name, title and subtitle passed to the dialog tag
{% enddialog %}This dialog message was generated by passing message_status=info as well as message_heading and message_description to the dialog template tag
{% enddialog %}This dialog message was generated by passing message_status=success as well as message_heading to the dialog template tag
{% enddialog %}This dialog message was generated by passing message_status=warning as well as message_heading and message_description to the dialog template tag
{% enddialog %}This dialog message was generated by passing message_status=critical as well as message_heading and message_description to the dialog template tag
{% enddialog %}This dialog allows other page content to be seen
{% enddialog %}Tabs can also indicate errors:
{% avatar %} Avatar normal
{% avatar size="square" %} Avatar square
{% avatar size="small" %} Avatar small
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
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: