demo/templates/demo/elements.html
{% extends 'demo/base.html' %}
{% load view_instance_code from demo_tags %}
{% load breadcrumbs message_box_with_icon from directory_components %}
{% block content %}
<div class="container">
{% breadcrumbs 'Elements & utility classes' %}<a href="/">Home</a>{% endbreadcrumbs %}
</div>
<section class="padding-top-30">
<div class="container">
<h1 class="heading-xlarge">Elements & utility classes</h1>
<h2 class="heading-large">Text</h2>
<h3 class="heading-medium">Headings</h3>
<div class="width-two-thirds">
<p>Use these heading classes to change the size of headings while still keeping HTML semantic. These are all <code>h3</code> headings with different heading classes.</p>
<h4 class="heading-xlarge">.heading-xlarge</h4>
<h4 class="heading-large">.heading-large</h4>
<h4 class="heading-medium">.heading-medium</h4>
<h4 class="heading-small">.heading-small</h4>
<h3 class="heading-medium">Font style</h3>
<p>These classes can be used to change font size and weight and are mobile responsive.</p>
</div>
<div class="grid-row">
<div class="column-half">
<p class="font-xxlarge">.font-xxlarge</p>
<p class="font-xlarge">.font-xlarge</p>
<p class="font-large">.font-large</p>
<p class="font-medium">.font-medium</p>
<p class="font-small">.font-small</p>
<p class="font-xsmall">.font-xsmall</p>
</div>
<div class="column-half">
<p class="bold-xxlarge">.bold-xxlarge</p>
<p class="bold-xlarge">.bold-xlarge</p>
<p class="bold-large">.bold-large</p>
<p class="bold-medium">.bold-medium</p>
<p class="bold-small">.bold-small</p>
<p class="bold-xsmall">.bold-xsmall</p>
</div>
</div>
<div class="width-two-thirds">
<h3 class="heading-medium">Text transform</h3>
<p>Use <code>.uppercase</code> to make text <span class="uppercase">all caps.</span></p>
</div>
</div>
</section>
<section>
<div class="container">
<div class="width-two-thirds">
<h2 class="heading-large">Lists</h2>
<h3 class="heading-medium">ul .list</h3>
<ul class="list">
<li><a href="#" class="link">Related link</a></li>
<li><a href="#" class="link">Another related link</a></li>
<li><a href="#" class="link">And another link</a></li>
<li><a href="#" class="link bold-xsmall">More</a></li>
</ul>
<h3 class="heading-medium">ul .list .list-bullet</h3>
<ul class="list list-bullet">
<li>here is a bulleted list</li>
<li>this is another item in the list</li>
<li>and another item with a bit more text</li>
</ul>
<h3 class="heading-medium">ol .list .list-number</h3>
<ol class="list list-number">
<li>Understand that this is a numbered list.</li>
<li>Follow the second step in this numbered list.</li>
<li>Make sure each item is a full sentence ending with a full stop.</li>
</ol>
</div>
</div>
</section>
<section>
<div class="container">
<h2 class="heading-large">Width</h2>
<p class="width-two-thirds">A shortcut to using <code>.grid-row</code> and column classes. For when there is only one column of content. Like column classes, expands to full width on mobile.</p>
<div class="background-stone-30 width-sixth">
<h3 class="heading-small">.width-sixth</h3>
<p>{% lorem 5 w random %}</p>
</div>
<div class="background-stone-30 width-quarter">
<h3 class="heading-small">.width-quarter</h3>
<p>{% lorem 10 w random %}</p>
</div>
<div class="background-stone-30 width-third">
<h3 class="heading-small">.width-third</h3>
<p>{% lorem 20 w random %}</p>
</div>
<div class="background-stone-30 width-half">
<h3 class="heading-small">.width-half</h3>
<p>{% lorem 30 w random %}</p>
</div>
<div class="background-stone-30 width-two-thirds">
<h3 class="heading-small">.width-two-thirds</h3>
<p>{% lorem 40 w random %}</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="width-two-thirds">
<h2 class="heading-large" id="colour">Colour</h2>
<p>When using colour, always be sure to check colour contrast meets accessibility requirements. <a href="https://wave.webaim.org/" class="link">WAVE</a> is useful for automatically checking for contrast and other accessibility issues. <a href="https://wave.webaim.org/extension/" class="link">Browser extensions for WAVE are also available</a> so it can be used in the local dev environment.</p>
{% message_box_with_icon icon='!' description='Text and background colour combinations that have low contrast have been flagged. Please avoid these.' %}
<h3 class="heading-medium">Core colours</h3>
<ul class="list list-bullet">
<li><span class="background-great-red white-text">GREAT Red</span> should only be used for the GREAT logo.</li>
<li><span class="background-grey white-text">Grey</span> is used for type where possible, if not black can be used.</li>
<li><span class="background-flag-red white-text">Flag Red</span> is used for red lines and can be used in type.</li>
<li><span class="background-stone">Stone</span> has been introduced for use as a pale background colour on pages and tables.</li>
</ul>
<h3 class="heading-medium">Colour variable names</h3>
<p>Colour utility classes have names based on the SASS colour variable names contained in <code>export_elements/sass/partials/colours</code>:</p>
<div class="grid-row">
<ul class="column-half colour-examples white-text">
<li class="background-purple">$purple</li>
<li class="background-great-blue">$great-blue</li>
<li class="background-dark-navy">$dark-navy</li>
<li class="background-mid-blue">$mid-blue</li>
<li class="background-active-blue">$active-blue</li>
<li class="background-light-blue">$light-blue</li>
<li class="background-aqua">$aqua</li>
<li class="background-teal">$teal</li>
<li class="background-flag-red">$flag-red</li>
<li class="background-great-red">$great-red</li>
<li class="background-focus-yellow black-text">$focus-yellow</li>
</ul>
<ul class="column-half colour-examples black-text">
<li class="background-black white-text">$black</li>
<li class="background-grey white-text">$grey</li>
<li class="background-mid-grey white-text">$mid-grey</li>
<li class="background-light-grey">$light-grey</li>
<li class="background-offwhite">$offwhite</li>
<li class="background-white">$white</li>
<li class="background-stone-10">$stone-10</li>
<li class="background-stone-20">$stone-20</li>
<li class="background-stone-30">$stone-30</li>
<li class="background-stone-40">$stone-40</li>
<li class="background-stone-50">$stone-50</li>
<li class="background-stone-60">$stone-60</li>
<li class="background-stone-70">$stone-70</li>
<li class="background-stone-80">$stone-80</li>
<li class="background-stone-90">$stone-90</li>
<li class="background-stone">$stone</li>
</ul>
</div>
<h3 class="heading-medium">Background colour</h3>
<div class="grid-row">
<div class="column-half colour-examples white-text">
<p class="background-purple">.background-purple</p>
<p class="background-great-blue">.background-great-blue</p>
<p class="background-dark-navy">.background-dark-navy</p>
<p class="background-mid-blue">.background-mid-blue</p>
<p class="background-active-blue">.background-active-blue</p>
<p class="background-light-blue">.background-light-blue <span class="background-great-red white-text bold-small padding-horizontal-15 margin-left-15">low contrast!</span></p>
<p class="background-aqua">.background-aqua</p>
<p class="background-teal">.background-teal <span class="background-great-red white-text bold-small padding-horizontal-15 margin-left-15">low contrast!</span></p>
<p class="background-flag-red">.background-flag-red</p>
<p class="background-great-red">.background-great-red</p>
<p class="background-focus-yellow black-text">.background-focus-yellow</p>
</div>
<div class="column-half colour-examples black-text">
<p class="background-black white-text">.background-black</p>
<p class="background-grey white-text">.background-grey</p>
<p class="background-mid-grey white-text">.background-mid-grey</p>
<p class="background-light-grey">.background-light-grey</p>
<p class="background-offwhite">.background-offwhite</p>
<p class="background-white">.background-white</p>
<p class="background-stone-10">.background-stone-10</p>
<p class="background-stone-20">.background-stone-20</p>
<p class="background-stone-30">.background-stone-30</p>
<p class="background-stone-40">.background-stone-40</p>
<p class="background-stone-50">.background-stone-50</p>
<p class="background-stone-60">.background-stone-60</p>
<p class="background-stone-70">.background-stone-70</p>
<p class="background-stone-80">.background-stone-80</p>
<p class="background-stone-90">.background-stone-90</p>
<p class="background-stone">.background-stone</p>
</div>
</div>
<h3 class="heading-medium">Text colour</h3>
<div class="grid-row">
<div class="column-half colour-examples">
<p class="purple-text">.purple-text</p>
<p class="great-blue-text">.great-blue-text</p>
<p class="dark-navy-text">.dark-navy-text</p>
<p class="mid-blue-text">.mid-blue-text</p>
<p class="active-blue-text">.active-blue-text</p>
<p class="light-blue-text">.light-blue-text <span class="background-great-red white-text bold-small padding-horizontal-15 margin-left-15">low contrast!</span></p>
<p class="aqua-text">.aqua-text</p>
<p class="teal-text">.teal-text <span class="background-great-red white-text bold-small padding-horizontal-15 margin-left-15">low contrast!</span></p>
<p class="flag-red-text">.flag-red-text</p>
<p class="great-red-text">.great-red-text</p>
<p class="focus-yellow-text background-great-blue">.focus-yellow-text</p>
</div>
<div class="column-half colour-examples">
<p class="black-text">.black-text</p>
<p class="grey-text">.grey-text</p>
<p class="mid-grey-text">.mid-grey-text</p>
<p class="light-grey-text background-black">.light-grey-text</p>
<p class="offwhite-text background-black">.offwhite-text</p>
<p class="white-text background-black">.white-text</p>
</div>
</div>
<h3 class="heading-medium">Border colour</h3>
<div class="grid-row">
<div class="column-half colour-examples">
<p class="border-medium border-purple">.border-purple</p>
<p class="border-medium border-great-blue">.border-great-blue</p>
<p class="border-medium border-dark-navy">.border-dark-navy</p>
<p class="border-medium border-mid-blue">.border-mid-blue</p>
<p class="border-medium border-active-blue">.border-active-blue</p>
<p class="border-medium border-light-blue">.border-light-blue</p>
<p class="border-medium border-aqua">.border-aqua</p>
<p class="border-medium border-teal">.border-teal</p>
<p class="border-medium border-flag-red">.border-flag-red</p>
<p class="border-medium border-great-red">.border-great-red</p>
<p class="border-medium border-focus-yellow">.border-focus-yellow</p>
</div>
<div class="column-half colour-examples">
<p class="border-medium border-black">.border-black</p>
<p class="border-medium border-grey">.border-grey</p>
<p class="border-medium border-mid-grey">.border-mid-grey</p>
<p class="border-medium border-light-grey">.border-light-grey</p>
<p class="border-medium border-offwhite">.border-offwhite</p>
<p class="border-medium border-white">.border-white</p>
<p class="border-medium border-stone-10">.border-stone-10</p>
<p class="border-medium border-stone-20">.border-stone-20</p>
<p class="border-medium border-stone-30">.border-stone-30</p>
<p class="border-medium border-stone-40">.border-stone-40</p>
<p class="border-medium border-stone-50">.border-stone-50</p>
<p class="border-medium border-stone-60">.border-stone-60</p>
<p class="border-medium border-stone-70">.border-stone-70</p>
<p class="border-medium border-stone-80">.border-stone-80</p>
<p class="border-medium border-stone-90">.border-stone-90</p>
<p class="border-medium border-stone">.border-stone</p>
</div>
</div>
<h3 class="heading-medium">Border thickness</h3>
<div class="grid-row">
<div class="column-half">
<p class="border-thin border-black">.border-thin</p>
<p class="border-medium border-black">.border-medium</p>
<p class="border-thick border-black">.border-thick</p>
</div>
</div>
</div>
</section>
<section class="underline-white background-great-blue white-text">
<div class="container">
<h2 class="heading-large">Section styles</h2>
<h3 class="heading-medium">.underline-white</h3>
</div>
</section>
<section class="with-flag background-great-blue white-text">
<div class="container">
<h3 class="heading-medium">.with-flag</h3>
<p>Adds a half flag image to the bottom left of the section.</p>
</div>
</section>
<section class="underline-active-blue">
<div class="container">
<h3 class="heading-medium">.underline-active-blue</h3>
<p>Underline classes are suffixed with colour names. <a href="#colour" class="link">See above for a full list of colours</a>.</p>
</div>
</section>
{% endblock %}