{% extends "layout.html" %} {% block page_title %} DVLA internal elements {% endblock %} {% block content %}
<div class="container">
    <div class="row">
        <div class="col-12">
            <h1>DVLA internal elements</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <p class="text-large">This guide shows how to make your service look consistent with the rest of DVLA.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <h4><a href="examples/layouts">Layout</a></h4>
            <p>Grid unit proportions, gutters and spacing.</p>
        </div>
        <div class="col-4">
            <h4><a href="examples/typography">Typography</a></h4>
            <p>Headings, body text, links, lists, inset text, hidden text.</p>
        </div>
        <div class="col-4">
            <h4><a href="examples/colour">Colour</a></h4>
            <p>Colour contrast, Sass variables, colour palettes.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <h4><a href="examples/icons-and-images">Icons and images</a></h4>
            <p>Icons and image ratios.</p>
        </div>
        <div class="col-4">
            <h4><a href="examples/data">Data</a></h4>
            <p>Data in a table, numeric tabular data, data visualisation.</p>
        </div>
        <div class="col-4">
            <h4><a href="examples/buttons">Buttons</a></h4>
            <p>Button text, button alignment, creating buttons.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <h4><a href="examples/forms">Form elements</a></h4>
            <p>Form fields, labels, focus states, radio buttons, checkboxes.</p>
        </div>
        <div class="col-4">
            <h4><a href="examples/validation">Errors and validation</a></h4>
            <p>Summary boxes, highlighting errors in forms.</p>
        </div>
        <div class="col-4">
            <h4><a href="examples/navigation">Navigation</a></h4>
            <p>Breadcrumbs, navigation bars.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <h4><a href="examples/components">Components</a></h4>
            <p>Rich elements responsible for displaying specific types for data</p>
        </div>
    </div>
</div>
{% endblock %}