Banner

A government banner identifying official U.S. government websites and informing users about HTTPS security. Follows USWDS banner patterns.

Props

Prop	Default	Description
`header_text`		Main header text (e.g., "An official website of the United States government")
`header_action`		Action link text shown in the header (e.g., "Here's how you know")
`control_id`		Unique ID for the accordion toggle linking the button to the expanded panel
`is_gov`		Set to `"true"` to display the U.S. flag icon and the standard `.gov`/HTTPS guidance panels
`content_primary`		HTML content for the primary guidance panel (`.gov` domain info); shown when `is_gov="true"`
`content_secondary`		HTML content for the secondary guidance panel (HTTPS info); shown when `is_gov="true"`
`custom_content`		HTML content for a custom banner body; shown when `is_gov="false"`

Example Usage

Official .gov Banner (Default)

<c-banner
    header_text="An official website of the United States government"
    header_action="Here's how you know"
    control_id="gov-banner"
    is_gov="true"
    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>"
/>

Custom Banner

<c-banner
    header_text="An official test banner"
    header_action="Click to learn more"
    control_id="custom-banner"
    is_gov="false"
    custom_content="<p>This is custom expandable content for a non-.gov banner.</p>"
/>

Usage Notes

Set is_gov="true" to display the U.S. flag icon alongside the standard .gov domain and HTTPS guidance panels
Set is_gov="false" and provide custom_content for custom or non-government banner scenarios
Each banner on a page requires a unique control_id
The banner uses an internal accordion; USWDS JavaScript is required for the expand/collapse behavior
Place the banner at the very top of the page, above the header

{% load cotton %}

<div class="component-variants">
    <h1>Banner Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton banner header_text="{{ variant.header_text }}" header_action="{{ variant.header_action }}" control_id="{{ variant.control_id }}" is_gov="{{ variant.is_gov }}" content_primary="{{ variant.content_primary }}" content_secondary="{{ variant.content_secondary }}" custom_content="{{ variant.custom_content }}" %}{% endcotton %}
    </div>
    {% endfor %}
</div>

name: Banner
context:
  variants:
    - title: ".gov (Default)"
      header_text: "An official website of the United States government"
      header_action: "Here’s how you know"
      control_id: "banner-1"
      is_gov: "true"
      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> (
              <span class="icon-lock"
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="52"
                  height="64"
                  viewBox="0 0 52 64"
                  class="usa-banner__lock-image"
                  role="img"
                  aria-labelledby="banner-lock-description-default"
                  focusable="false"
                >
                  <title id="banner-lock-title-default">Lock</title>
                  <desc id="banner-lock-description-default">Locked padlock icon</desc>
                  <path
                    fill="#000000"
                    fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"
                  />
                </svg> </span
              >) or <strong>https://</strong> means you’ve safely connected to
              the .gov website. Share sensitive information only on official,
              secure websites.
            </p>'
            
    - title: "Custom Banner"
      header_text: "An official test banner"
      header_action: "Click me to learn more"
      control_id: "banner-2"
      is_gov: "false"
      custom_content: "<p>
              Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
            </p>"