Identifier

identityUSWDS-derived

Agency identification block with logos, required links, and disclaimers.

Variants

Default

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

<div class="flex-identifier">
  <section class="flex-identifier__section flex-identifier__section--masthead" aria-label="Agency identifier">
    <div class="flex-identifier__container">
      <div class="flex-identifier__logos">
        <a href="/" class="flex-identifier__logo">
          <img class="flex-identifier__logo-img" src="/static/img/logo-img.png" alt="Agency logo"/>
        </a>
      </div>
      <div class="flex-identifier__identity">
        <p class="flex-identifier__identity-domain">agency.gov</p>
        <p class="flex-identifier__identity-disclaimer">An official website of the <a href="/">Agency Name</a></p>
      </div>
    </div>
  </section>
  <nav class="flex-identifier__section" aria-label="Important links">
    <div class="flex-identifier__container">
      <ul class="flex-identifier__required-links-list">
        <li class="flex-identifier__required-links-list-item"><a href="#" class="flex-identifier__required-link">About</a></li>
        <li class="flex-identifier__required-links-list-item"><a href="#" class="flex-identifier__required-link">Accessibility</a></li>
        <li class="flex-identifier__required-links-list-item"><a href="#" class="flex-identifier__required-link">FOIA Requests</a></li>
        <li class="flex-identifier__required-links-list-item"><a href="#" class="flex-identifier__required-link">No FEAR Act</a></li>
        <li class="flex-identifier__required-links-list-item"><a href="#" class="flex-identifier__required-link">Privacy Policy</a></li>
      </ul>
    </div>
  </nav>
  <section class="flex-identifier__section flex-identifier__section--usagov" aria-label="U.S. government information and services">
    <div class="flex-identifier__container">
      <p class="flex-identifier__usagov-description">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></p>
    </div>
  </section>
</div>

Contract

Class mapping

USWDS	Flex	Notes
`usa-identifier`	`.flex-identifier`	Outer identifier wrapper
`usa-identifier__section`	`.flex-identifier__section`	Section divider
`usa-identifier__section--masthead`	`.flex-identifier__section--masthead`	Masthead section with logo and identity
`usa-identifier__container`	`.flex-identifier__container`	Max-width container
`usa-identifier__logos`	`.flex-identifier__logos`	Logo container
`usa-identifier__logo`	`.flex-identifier__logo`	Individual logo link
`usa-identifier__identity`	`.flex-identifier__identity`	Identity text (domain + disclaimer)
`usa-identifier__identity-domain`	`.flex-identifier__identity-domain`	Domain text
`usa-identifier__identity-disclaimer`	`.flex-identifier__identity-disclaimer`	Disclaimer text
`usa-identifier__required-links-list`	`.flex-identifier__required-links-list`	Required links list
`usa-identifier__required-link`	`.flex-identifier__required-link`	Individual required link
`usa-identifier__section--usagov`	`.flex-identifier__section--usagov`	USA.gov section

Verified properties

background-colorcolorfont-familyfont-sizeline-heightpadding-bottom

Source CSS

/* flex-identifier — USWDS Identifier conformance
   Agency identification with logos, required links, and disclaimers */

.flex-identifier {
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--flex-white);
  background-color: var(--flex-gray-90);
  padding-block-end: 1rem;
}

/* --- Container --- */

.flex-identifier__container {
  margin-inline: auto;
  padding-inline: var(--flex-space-md);
  max-inline-size: var(--flex-content-max-width);
}

/* --- Sections --- */

.flex-identifier__section {
  padding-block: 1rem;
}

.flex-identifier__section--masthead .flex-identifier__container {
  align-items: center;
  display: flex;
}

/* --- Logos --- */

.flex-identifier__logos {
  display: flex;
  margin-inline-end: 1rem;
}

.flex-identifier__logo {
  text-decoration: none;
  block-size: 3rem;
  display: block;

  & + & {
    margin-inline-start: 0.5rem;
  }
}

.flex-identifier__logo-img {
  block-size: 100%;
  inline-size: auto;
}

/* --- Identity --- */

.flex-identifier__identity {
  flex: 1 1 0%;
  margin-block-start: 0;
}

.flex-identifier__identity-disclaimer,
.flex-identifier__identity-domain {
  margin: 0;
  padding: 0;
}

.flex-identifier__identity-domain {
  color: var(--flex-gray-cool-30);
}

.flex-identifier__identity-disclaimer {
  font-weight: 700;

  & a,
  & a:visited {
    color: var(--flex-gray-cool-10);
  }

  & a:active,
  & a:hover {
    color: var(--flex-gray-5);
  }
}

/* --- Required links --- */

.flex-identifier__required-links-list {
  list-style-type: none;
  padding-inline-start: 0;
  margin-block: 0;
  column-count: 2;
  column-gap: 2rem;
  column-fill: balance;
}

@media (min-width: 48rem) {
  .flex-identifier__required-links-list {
    column-count: 4;
  }
}

.flex-identifier__required-links-list-item {
  break-inside: avoid;
  margin-block-end: 0.5rem;

  &:last-child {
    margin-block-end: 0;
  }
}

.flex-identifier__required-link,
.flex-identifier__required-link:visited {
  color: var(--flex-gray-cool-30);
  display: inline-block;
}

.flex-identifier__required-link:active,
.flex-identifier__required-link:hover {
  color: var(--flex-gray-cool-10);
}

/* --- USA.gov description --- */

.flex-identifier__usagov-description {
  margin: 0;
}

.flex-identifier__section--usagov a {
  color: var(--flex-gray-cool-10);
  font-weight: 700;

  &:visited {
    color: var(--flex-gray-cool-10);
  }

  &:active,
  &:hover {
    color: var(--flex-gray-5);
  }
}