{% extends "layout.html" %}

{% block page_title %}
  Buttons
{% endblock %}

{% block content %}
<div class="container">
    <div class="breadcrumbs">
        <ol>
            <li><a href="/">DVLA internal elements</a></li> 
            <li>Buttons</li>
        </ol>
    </div>
    <div class="row">
        <div class="col-12">
            <h1>Buttons</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <ol class="list-numbered">
                <li><a href="#text">Button text</a></li>
                <li><a href="#styles">Styles</a></li>
                <li><a href="#sizes">Sizes</a></li>
                <li><a href="#sizes">Disabled</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Button text</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include './includes/buttons/text.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="text" class="line-numbers language-markup"><code><xmp>{% include './includes/buttons/text.html' %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Styles</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include './includes/buttons/styles.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="styles" class="line-numbers language-markup"><code><xmp>{% include './includes/buttons/styles.html' %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Sizes</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include './includes/buttons/sizes.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="sizes" class="line-numbers language-markup"><code><xmp>{% include './includes/buttons/sizes.html' %}</xmp></code></pre>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Disabled</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="example-demo">
                {% include './includes/buttons/disabled.html' %}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <pre id="disabled" class="line-numbers language-markup"><code><xmp>{% include './includes/buttons/disabled.html' %}</xmp></code></pre>
        </div>
    </div>
</div>
{% endblock %}