{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}

{% block title %}
    Exemplo de Tag
{% endblock %}

{% block content %}
    <div class="container mt-5"> 
        <div class="d-flex align-items-center">
            {% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-car" tag_text="Carro 1" tag_id="interaction01" %}
            {% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-bicycle" tag_text="Bicicleta 1" tag_id="interaction02" %}
            {% br_tag extra_classes="mr-3" close_button=True close_icon_class="fas fa-times" icon_class="fas fa-motorcycle" tag_text="Moto 1" tag_id="interaction03" %}
        </div>

        <div class="d-flex align-items-center mt-3">
            {% br_tag icon_class="fas fa-car" tag_text="Texto e ícone" tag_id="tag02" extra_classes="bg-mint-cool-vivid-70 mr-3" %}
            {% br_tag tag_text="Texto" tag_id="tag02" extra_classes="bg-violet-warm-vivid-70 mr-3" %}
        </div>

        <div class="d-flex align-items-center mt-3">
            {% br_tag tag_text="Alta" tag_id="densidade01" extra_classes="bg-orange-vivid-50 mr-3" density="small" %}
            {% br_tag tag_text="Padrão" tag_id="densidade02" extra_classes="bg-green-warm-vivid-50 mr-3" density="medium" %}
            {% br_tag tag_text="Baixa" tag_id="densidade03" extra_classes="bg-indigo-warm-vivid-50 mr-3" density="large" %}
        </div>
    </div>
{% endblock %}