{% extends "layout.html" %}

{% block page_title %}
  Typography
{% endblock %}

{% block content %}
<div class="container">
    <div class="breadcrumbs">
        <ol>
            <li><a href="/">DVLA internal elements</a></li> 
            <li>Typography</li>
        </ol>
    </div>
    <div class="row">
        <div class="col-12">
            <h1>Typography</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <ol class="list-numbered">
                <li><a href="#headings">Headings</a></li>
                <li><a href="#paragraphs">Paragraphs</a></li>
                <li><a href="#links">Links</a></li>
                <li><a href="#lists">Lists</a></li>
                <li><a href="#inset">Insets</a></li>
                <li><a href="#important">Important</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Headings</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include './includes/typography/headings.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="headings" class="line-numbers language-markup"><code><xmp>{% include './includes/typography/headings.html' %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Paragraphs</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include './includes/typography/paragraphs.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="paragraphs" class="line-numbers language-markup"><code><xmp>{% include './includes/typography/paragraphs.html' %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Links</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include './includes/typography/links.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="links" class="line-numbers language-markup"><code><xmp>{% include './includes/typography/links.html' %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Lists</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include "./includes/typography/lists.html" %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="lists" class="line-numbers language-markup"><code><xmp>{% include "./includes/typography/lists.html"  %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Insets</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include "./includes/typography/inset.html" %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="inset" class="line-numbers language-markup"><code><xmp>{% include "./includes/typography/inset.html"  %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Important</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include "./includes/typography/important.html" %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="important" class="line-numbers language-markup"><code><xmp>{% include "./includes/typography/important.html"  %}</xmp></code></pre>
        </div>
    </div>
    {% endblock %}