{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A tag draws attention to new or categorized content elements.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-tag>New</c-tag>
<c-tag>Pending review</c-tag>
<c-tag>Draft</c-tag>
<c-tag>Active</c-tag>

<h2 class="font-heading-xl margin-top-4">Big</h2>
<c-tag variant="big">New</c-tag>
<c-tag variant="big">Pending review</c-tag>
<c-tag variant="big">Draft</c-tag>
<c-tag variant="big">Active</c-tag>
{% endblock %}