{% extends "shatailadmin/base.html" %} {% load shatailadmin_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 "shatailadmin/shared/header.html" with title=title_trans icon='image' %}
WCAG (Web Content Accessibility Guidelines) ensures that content is accessible by everyone, regardless of any disability or user device. To ensure text remains compliant with WCAG 2.0 AA standards, use only these permitted colour combinations.
Use this Color Palette Accessibility Checker to test new colour combinations using the existing colour palette.
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.
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
{% icon name='warning' %} A warning message might be output in cases where a user's action could have serious consequences
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:
Tabs can also indicate errors:
Avatar normal
Avatar square
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: