{% extends "dsgov/base.html" %}

{% block title %}
    Componentes Django-DsGOV
{% endblock %}

{% block content %}
    <div class="container">
        <h2>Exemplos de Componentes do Design System do Governo Brasileiro</h2>
        <h4 class="">Veja como usar os componentes do Design System do Governo Brasileiro com Django.</h4>
        <ul class="text-start" style="display: inline-block;">
            <li>O Design System do Governo Brasileiro oferece uma série de componentes.</li>
            <li>Esses componentes são construídos para serem acessíveis e responsivos.</li>
            <li>Agora você pode usar esses componentes em seus projetos Django para criar interfaces consistentes.</li>
            <li>Veja os exemplos abaixo para entender como usar cada componente.</li>
        </ul>
        <div class="br-list" role="list">
            <div class="header">
                <div class="title">
                    Visualize nossos componentes
                </div>
            </div><span class="br-divider"></span>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-play" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'buttons' %}">Exemplos de Botões</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-keyboard" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'inputs' %}">Exemplos de Inputs</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-heading" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'headers' %}">Exemplos de Headers</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-shoe-prints" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'footer' %}">Exemplos de Footers</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fas fa-image" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'carousel' %}">Exemplos de Carousel</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fas fa-bars" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'menu' %}">Exemplos de Menu</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-list" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'list' %}">Exemplos de List</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-sitemap" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'breadcrumb' %}">Exemplos de Breadcrumb</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-tag" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'tag' %}">Exemplos de Tags</a>
                    </div>
                </div>
            </div>
            <div class="br-item" role="listitem">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <i class="fa-solid fa-sitemap" aria-hidden="true"></i>
                    </div>
                    <div class="col">
                        <a href="{% url 'pagination' %}">Exemplos de Pagination</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}