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

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">A banner identifies official websites of government organizations in the United States.</p>

<h2 class="font-heading-xl margin-top-4">Default</h2>
<c-banner
    is_gov="true"
    header_text="An official website of the United States government"
    header_action="Here's how you know"
    control_id="gov-banner-default"
    content_primary="<p><strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States.</p>"
    content_secondary="<p><strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> (🔒) or <strong>https://</strong> means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>"
/>
{% endblock %}