{% extends "layout.html" %}

{% block page_title %}
  Colour
{% endblock %}

{% block content %}
<div class="container">
    <div class="breadcrumbs">
        <ol>
            <li><a href="/">DVLA internal elements</a></li> 
            <li>Colour</li>
        </ol>
    </div>
    <div class="row">
        <div class="col-12">
            <h2 id="primary" class="example"> Colour</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <ol class="list-numbered">
                <li><a href="#primary">Primary</a></li>
                <li><a href="#secondary">Secondary</a></li>
                <li><a href="#success">Success</a></li>
                <li><a href="#error">Error</a></li>
                <li><a href="#warning">Warning</a></li>
                <li><a href="#interface">Interface</a></li>
                <li><a href="#status">Status</a></li>
                <li><a href="#accents">Accents</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Primary colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="interface" class="example-demo">
                {% include './includes/colours/primary.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Secondary colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="interface" class="example-demo">
                {% include './includes/colours/secondary.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Success colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="interface" class="example-demo">
                {% include './includes/colours/success.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Warning colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="interface" class="example-demo">
                {% include './includes/colours/warning.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Error colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="interface" class="example-demo">
                {% include './includes/colours/error.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2 id="sass" class="example"> Sass variables</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Interface colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="interface" class="example-demo">
                {% include './includes/colours/interface.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Status colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="status" class="example-demo">
                {% include './includes/colours/status.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h3>Accents colours</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="accents" class="example-demo">
                {% include './includes/colours/accents.html' %}
            </div>
        </div>
    </div>
</div>
{% endblock %}