Identifier

A federal agency identifier that communicates a site's parent agency and displays required agency links following USWDS patterns.

Props

Prop	Default	Description
`domain`		Agency domain (e.g., "agency.gov")
`disclaimer`		Agency disclaimer HTML content
`masthead_aria_label`	`Agency identifier`	ARIA label for masthead section
`identity_aria_label`	`Agency description`	ARIA label for identity section
`links_aria_label`	`Important links`	ARIA label for required links
`usagov_aria_label`	`U.S. government information and services`	ARIA label for USA.gov section
`usagov_text`	`Looking for U.S. government information and services?`	USA.gov section text
`usagov_link_text`	`Visit USA.gov`	USA.gov link text
`usagov_link_href`	`https://www.usa.gov/`	USA.gov link URL

Slots

Slot	Description
(default)	Required links (`c-identifier.link`)
`logos`	Agency logos (`c-identifier.logo`)

Sub-components

`c-identifier.logo`

Prop	Default	Description
`href`		Logo link URL
`icon`		USWDS icon name (e.g., "flag")
`alt`		Image alt text

`c-identifier.link`

Prop	Default	Description
`href`		Link URL
`text`		Link text

Example Usage

Default Identifier

<c-identifier
    domain="agency.gov"
    disclaimer='<span aria-hidden="true">An </span>official website of the <a href="#">Parent Agency</a>'
>
    <c-slot name="logos">
        <c-identifier.logo href="#" icon="flag" alt="Parent agency logo" />
    </c-slot>

    <c-identifier.link href="#" text="About Parent Agency" />
    <c-identifier.link href="#" text="Accessibility statement" />
    <c-identifier.link href="#" text="FOIA requests" />
    <c-identifier.link href="#" text="No FEAR Act data" />
    <c-identifier.link href="#" text="Office of the Inspector General" />
    <c-identifier.link href="#" text="Performance reports" />
    <c-identifier.link href="#" text="Privacy policy" />
</c-identifier>

Multiple Logos

<c-identifier
    domain="agency.gov"
    disclaimer='<span aria-hidden="true">An </span>official website of <a href="#">Agency One</a> and <a href="#">Agency Two</a>'
>
    <c-slot name="logos">
        <c-identifier.logo href="#" icon="flag" alt="Agency One logo" />
        <c-identifier.logo href="#" icon="flag" alt="Agency Two logo" />
    </c-slot>

    <c-identifier.link href="#" text="About the agencies" />
    <c-identifier.link href="#" text="Accessibility statement" />
</c-identifier>

No Logos

<c-identifier
    domain="agency.gov"
    disclaimer='<span aria-hidden="true">An </span>official website of the <a href="#">Parent Agency</a>'
>
    <c-identifier.link href="#" text="About Parent Agency" />
    <c-identifier.link href="#" text="Accessibility statement" />
    <c-identifier.link href="#" text="FOIA requests" />
</c-identifier>

Taxpayer Disclaimer

<c-identifier
    domain="agency.gov"
    disclaimer='<span aria-hidden="true">An </span>official website of the <a href="#">Parent Agency</a>. Produced and published at taxpayer expense.'
>
    <c-slot name="logos">
        <c-identifier.logo href="#" icon="flag" alt="Parent agency logo" />
    </c-slot>

    <c-identifier.link href="#" text="About Parent Agency" />
    <c-identifier.link href="#" text="Accessibility statement" />
</c-identifier>

{% load cotton %}

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

        {% cotton identifier domain="{{ variant.domain }}" disclaimer="{{ variant.disclaimer }}" %}
            {% if variant.logos %}
            {% cotton:slot logos %}
                {% for logo in variant.logos %}
                {% cotton identifier.logo href="{{ logo.href }}" icon="{{ logo.icon }}" alt="{{ logo.alt }}" %}{% endcotton %}
                {% endfor %}
            {% endcotton:slot %}
            {% endif %}
            
            {% for link in variant.links %}
            {% cotton identifier.link href="{{ link.href }}" text="{{ link.text }}" %}{% endcotton %}
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Identifier
context:
  variants:
    - title: "Default Identifier"
      domain: "domain.gov"
      disclaimer: '<span aria-hidden="true">An </span>official website of the <a href="#">Parent Agency</a>'
      logos:
        - href: "#"
          icon: "instagram"
          alt: "Parent agency logo"
      links:
        - href: "#"
          text: "About Parent Agency"
        - href: "#"
          text: "Accessibility statement"
        - href: "#"
          text: "FOIA requests"
        - href: "#"
          text: "No FEAR Act data"
        - href: "#"
          text: "Office of the Inspector General"
        - href: "#"
          text: "Performance reports"
        - href: "#"
          text: "Privacy policy"

    - title: "Multiple Logos"
      domain: "domain.gov"
      disclaimer: '<span aria-hidden="true">An </span>official website of the <a href="#">Parent Agency</a> and the <a href="#">Other Agency</a>'
      logos:
        - href: "#"
          icon: "instagram"
          alt: "Parent agency logo"
        - href: "#"
          icon: "instagram"
          alt: "Other agency logo"
      links:
        - href: "#"
          text: "About Parent Agency"
        - href: "#"
          text: "Accessibility statement"
        - href: "#"
          text: "FOIA requests"
        - href: "#"
          text: "No FEAR Act data"
        - href: "#"
          text: "Office of the Inspector General"
        - href: "#"
          text: "Performance reports"
        - href: "#"
          text: "Privacy policy"

    - title: "No Logos"
      domain: "domain.gov"
      disclaimer: '<span aria-hidden="true">An </span>official website of the <a href="#">Parent Agency</a>'
      links:
        - href: "#"
          text: "About Parent Agency"
        - href: "#"
          text: "Accessibility statement"
        - href: "#"
          text: "FOIA requests"
        - href: "#"
          text: "No FEAR Act data"
        - href: "#"
          text: "Office of the Inspector General"
        - href: "#"
          text: "Performance reports"
        - href: "#"
          text: "Privacy policy"

    - title: "Taxpayer Disclaimer"
      domain: "domain.gov"
      disclaimer: '<span aria-hidden="true">An </span>official website of the <a href="#">Parent Agency</a>. Produced and published at taxpayer expense.'
      logos:
        - href: "#"
          icon: "instagram"
          alt: "Parent agency logo"
      links:
        - href: "#"
          text: "About Parent Agency"
        - href: "#"
          text: "Accessibility statement"
        - href: "#"
          text: "FOIA requests"
        - href: "#"
          text: "No FEAR Act data"
        - href: "#"
          text: "Office of the Inspector General"
        - href: "#"
          text: "Performance reports"
        - href: "#"
          text: "Privacy policy"