Skip to main content
USWDS + Tailwind

Identifier

Show a federal site's parent agency and required agency links with the identifier.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

domain.gov

An official website of the Parent Agency

Looking for U.S. government information and services? Visit USA.gov

identifier-demo.tsx
import { Identifier } from '@uswds-tailwind/react/identifier'
import { Link } from '@uswds-tailwind/react/link'


export default function IdentifierDemo() {
  return (
    <Identifier.Root>
      <Identifier.Container>
        <Identifier.Masthead aria-label="Agency identifier">
          <Identifier.LogoGroup>
            <Identifier.Logo href="#" aria-label="Parent agency homepage">
              <span aria-hidden="true" className="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">A</span>
            </Identifier.Logo>
          </Identifier.LogoGroup>
          <Identifier.Identity aria-label="Agency description">
            <Identifier.Domain>domain.gov</Identifier.Domain>
            <Identifier.Disclaimer>
              An official website of the
              {' '}
              <Link href="#" variant="light">Parent Agency</Link>
            </Identifier.Disclaimer>
          </Identifier.Identity>
        </Identifier.Masthead>
        <Identifier.RequiredLinks aria-label="Important links">
          <Identifier.RequiredLinksList>
            <Identifier.LinkItem><Identifier.Link href="#">About Parent Agency</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Accessibility statement</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">FOIA requests</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">No FEAR Act data</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Office of the Inspector General</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Performance reports</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Privacy policy</Identifier.Link></Identifier.LinkItem>
          </Identifier.RequiredLinksList>
        </Identifier.RequiredLinks>
        <Identifier.Tagline aria-label="U.S. government information and services">
          <p>
            Looking for U.S. government information and services?
            {' '}
            <Link href="https://www.usa.gov/" variant="light" isExternal className="font-bold block @desktop:inline">Visit USA.gov</Link>
          </p>
        </Identifier.Tagline>
      </Identifier.Container>
    </Identifier.Root>
  )
}

Replace the placeholder seal with your agency logo and update the agency name, domain, and required links for your site.

Multiple parents and logos

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
identifier-multiple-logos-demo.tsx
import { Identifier } from '@uswds-tailwind/react/identifier'
import { Link } from '@uswds-tailwind/react/link'


export default function IdentifierMultipleLogosDemo() {
  return (
    <Identifier.Root>
      <Identifier.Container>
        <Identifier.Masthead aria-label="Agency identifier">
          <Identifier.LogoGroup>
            <Identifier.Logo href="#" aria-label="Parent agency homepage">
              <span aria-hidden="true" className="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">A</span>
            </Identifier.Logo>
            <Identifier.Logo href="#" aria-label="Partner agency homepage">
              <span aria-hidden="true" className="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">B</span>
            </Identifier.Logo>
          </Identifier.LogoGroup>
          <Identifier.Identity aria-label="Agency description">
            <Identifier.Domain>domain.gov</Identifier.Domain>
            <Identifier.Disclaimer>
              An official website of the
              {' '}
              <Link href="#" variant="light">Parent Agency</Link>
              {' '}
              and the
              {' '}
              <Link href="#" variant="light">Partner Agency</Link>
            </Identifier.Disclaimer>
          </Identifier.Identity>
        </Identifier.Masthead>
        <Identifier.RequiredLinks aria-label="Important links">
          <Identifier.RequiredLinksList>
            <Identifier.LinkItem><Identifier.Link href="#">About Parent Agency</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Accessibility statement</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">FOIA requests</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">No FEAR Act data</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Office of the Inspector General</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Performance reports</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Privacy policy</Identifier.Link></Identifier.LinkItem>
          </Identifier.RequiredLinksList>
        </Identifier.RequiredLinks>
        <Identifier.Tagline aria-label="U.S. government information and services">
          <p>
            Looking for U.S. government information and services?
            {' '}
            <Link href="https://www.usa.gov/" variant="light" isExternal className="font-bold block @desktop:inline">Visit USA.gov</Link>
          </p>
        </Identifier.Tagline>
      </Identifier.Container>
    </Identifier.Root>
  )
}

No logos

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
identifier-no-logos-demo.tsx
import { Identifier } from '@uswds-tailwind/react/identifier'
import { Link } from '@uswds-tailwind/react/link'


export default function IdentifierNoLogosDemo() {
  return (
    <Identifier.Root>
      <Identifier.Container>
        <Identifier.Masthead aria-label="Agency identifier">
          <Identifier.Identity aria-label="Agency description">
            <Identifier.Domain>domain.gov</Identifier.Domain>
            <Identifier.Disclaimer>
              An official website of the
              {' '}
              <Link href="#" variant="light">Parent Agency</Link>
            </Identifier.Disclaimer>
          </Identifier.Identity>
        </Identifier.Masthead>
        <Identifier.RequiredLinks aria-label="Important links">
          <Identifier.RequiredLinksList>
            <Identifier.LinkItem><Identifier.Link href="#">About Parent Agency</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Accessibility statement</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">FOIA requests</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">No FEAR Act data</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Office of the Inspector General</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Performance reports</Identifier.Link></Identifier.LinkItem>
            <Identifier.LinkItem><Identifier.Link href="#">Privacy policy</Identifier.Link></Identifier.LinkItem>
          </Identifier.RequiredLinksList>
        </Identifier.RequiredLinks>
        <Identifier.Tagline aria-label="U.S. government information and services">
          <p>
            Looking for U.S. government information and services?
            {' '}
            <Link href="https://www.usa.gov/" variant="light" isExternal className="font-bold block @desktop:inline">Visit USA.gov</Link>
          </p>
        </Identifier.Tagline>
      </Identifier.Container>
    </Identifier.Root>
  )
}

Component API

Build the site identifier with masthead, required links, and optional identity and tagline blocks.

Root<div>

Place Masthead and RequiredLinks inside Root.

Container<div>

Constrains the content width.

Masthead<section>

Contains logo and identity information.

LogoGroup<div>

Groups one or more organization logos.

Links from an organization logo.

Identity<section>

Holds identity text.

Domain<p>

Shows the site domain.

Disclaimer<p>

Shows the site disclaimer.

Contains required site links.

Lists required destinations.

Wrap a Link for each required destination.

Set href to the required destination.

Tagline<section>

Holds a short agency tagline.