---
title: Identifier (Vanilla) - USWDS + Tailwind
description: Show a federal site's parent agency and required agency links with
  the identifier.
---

# Identifier

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

## Examples

The examples show one parent agency, multiple parents, and no logos.

### Default

```html
<div class="@container bg-gray-90 text-white pb-4 font-public-sans">
<div class="max-w-desktop mx-auto px-4 desktop:px-8">
  <section aria-label="Agency identifier" class="py-4 flex flex-col @tablet:flex-row gap-4">
    <div class="flex gap-2">
      <a href="#" aria-label="Parent agency homepage" class="block focus:outline-4 focus:outline-blue-40v h-12 rounded-full overflow-hidden">
        <span aria-hidden="true" class="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">A</span>
      </a>
    </div>
    <section aria-label="Agency description">
      <p class="text-gray-30">domain.gov</p>
      <p class="font-bold">An official website of the <a href="#" class="focus:outline-4 focus:outline-blue-40v underline text-gray-10 visited:text-gray-10 hover:text-gray-5">Parent Agency</a></p>
    </section>
  </section>
  <nav aria-label="Important links" class="py-2">
    <ul class="columns-1 @tablet:columns-2 @desktop:columns-4 space-y-2">
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">About Parent Agency</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Accessibility statement</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">FOIA requests</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">No FEAR Act data</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Office of the Inspector General</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Performance reports</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Privacy policy</a></li>
    </ul>
  </nav>
  <section aria-label="U.S. government information and services" class="py-4">
    <p>Looking for U.S. government information and services? <a href="https://www.usa.gov/" class="focus:outline-4 focus:outline-blue-40v underline text-gray-10 visited:text-gray-10 hover:text-gray-5 after:icon-[material-symbols--open-in-new] after:size-4 after:align-middle after:ml-px font-bold block @desktop:inline">Visit USA.gov</a></p>
  </section>
</div>
</div>
```

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

### Multiple parents and logos

```html
<div class="@container bg-gray-90 text-white pb-4 font-public-sans">
<div class="max-w-desktop mx-auto px-4 desktop:px-8">
  <section aria-label="Agency identifier" class="py-4 flex flex-col @tablet:flex-row gap-4">
    <div class="flex gap-2">
      <a href="#" aria-label="Parent agency homepage" class="block focus:outline-4 focus:outline-blue-40v h-12 rounded-full overflow-hidden">
        <span aria-hidden="true" class="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">A</span>
      </a>
      <a href="#" aria-label="Partner agency homepage" class="block focus:outline-4 focus:outline-blue-40v h-12 rounded-full overflow-hidden">
        <span aria-hidden="true" class="flex size-12 items-center justify-center rounded-full bg-gray-30 font-bold text-gray-90">B</span>
      </a>
    </div>
    <section aria-label="Agency description">
      <p class="text-gray-30">domain.gov</p>
      <p class="font-bold">An official website of the <a href="#" class="focus:outline-4 focus:outline-blue-40v underline text-gray-10 visited:text-gray-10 hover:text-gray-5">Parent Agency</a> and the <a href="#" class="focus:outline-4 focus:outline-blue-40v underline text-gray-10 visited:text-gray-10 hover:text-gray-5">Partner Agency</a></p>
    </section>
  </section>
  <nav aria-label="Important links" class="py-2">
    <ul class="columns-1 @tablet:columns-2 @desktop:columns-4 space-y-2">
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">About Parent Agency</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Accessibility statement</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">FOIA requests</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">No FEAR Act data</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Office of the Inspector General</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Performance reports</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Privacy policy</a></li>
    </ul>
  </nav>
  <section aria-label="U.S. government information and services" class="py-4">
    <p>Looking for U.S. government information and services? <a href="https://www.usa.gov/" class="focus:outline-4 focus:outline-blue-40v underline text-gray-10 visited:text-gray-10 hover:text-gray-5 after:icon-[material-symbols--open-in-new] after:size-4 after:align-middle after:ml-px font-bold block @desktop:inline">Visit USA.gov</a></p>
  </section>
</div>
</div>
```

### No logos

```html
<div class="@container bg-gray-90 text-white pb-4 font-public-sans">
<div class="max-w-desktop mx-auto px-4 desktop:px-8">
  <section aria-label="Agency identifier" class="py-4 flex flex-col @tablet:flex-row gap-4">
    <section aria-label="Agency description">
      <p class="text-gray-30">domain.gov</p>
      <p class="font-bold">An official website of the <a href="#" class="focus:outline-4 focus:outline-blue-40v underline text-gray-10 visited:text-gray-10 hover:text-gray-5">Parent Agency</a></p>
    </section>
  </section>
  <nav aria-label="Important links" class="py-2">
    <ul class="columns-1 @tablet:columns-2 @desktop:columns-4 space-y-2">
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">About Parent Agency</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Accessibility statement</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">FOIA requests</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">No FEAR Act data</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Office of the Inspector General</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Performance reports</a></li>
      <li><a href="#" class="text-gray-cool-30 hover:text-gray-cool-10 focus:outline-4 focus:outline-blue-40v underline">Privacy policy</a></li>
    </ul>
  </nav>
  <section aria-label="U.S. government information and services" class="py-4">
    <p>Looking for U.S. government information and services? <a href="https://www.usa.gov/" class="focus:outline-4 focus:outline-blue-40v underline text-gray-10 visited:text-gray-10 hover:text-gray-5 after:icon-[material-symbols--open-in-new] after:size-4 after:align-middle after:ml-px font-bold block @desktop:inline">Visit USA.gov</a></p>
  </section>
</div>
</div>
```