diff --git a/web-components/index.html b/web-components/index.html
index df80a624..b376a417 100644
--- a/web-components/index.html
+++ b/web-components/index.html
@@ -7,6 +7,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>USWDS + Lit</title>
   <script type="module" src="/src/components/usa-link/index.js"></script>
+  <script type="module" src="/src/components/usa-identifier/index.js"></script>
+  <script type="module" src="/src/components/usa-identifier-attributes/index.js"></script>
+  <script type="module" src="/src/components/usa-identifier-attributes-object/index.js"></script>
+
   <style>
     :root {
       --theme-link-color: hotpink;
@@ -28,4 +32,215 @@
   </p>
 </body>
 
+  <h2>Option 1: Minimal markup</h2>
+    <p>Benefits: content is still available if no JS, intuitive implementation and customization</p>
+    <h3>Simple implementation</h3>
+    <ul>
+      <li>Default content</li>
+      <li>One agency/logo</li>
+    </ul>
+
+    <!--
+      TODO:
+      - consider using named slots for nav links
+      - improve slot naming to be more intuitive
+    -->
+    <usa-identifier>
+      <a slot="logo" href="https://www.gsa.gov/">
+        <img
+          src="https://designsystem.digital.gov/img/gsa-logo.svg"
+          alt="General Services Administration logo"/>
+      </a>
+      <p slot="domain">designsystem.digital.gov</p>
+      <p slot="disclaimer">An official website of the <a href="https://gsa.gov/">General Services Administration</a></p>
+      <nav slot="links">
+        <a href="https://www.gsa.gov/about-us">About GSA</a>
+        <a href="https://www.gsa.gov/website-information/accessibility-statement">Accessibility statement</a>
+        <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">FOIA requests</a>
+        <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">No FEAR Act data</a>
+        <a href="https://www.gsaig.gov/">Office of the Inspector General</a>
+        <a href="https://www.gsa.gov/reference/reports/budget-performance">Performance reports</a>
+        <a href="https://www.gsa.gov/website-information/website-policies">Privacy policy</a>
+      </nav>
+      <div slot="usagov">Looking for U.S. government information and services? <a href="https://www.usa.gov/">Visit USA.gov</a></div>
+    </usa-identifier>
+
+    <h3>Complex implementation</h3>
+    <ul>
+      <li>Custom content</li>
+      <li>Taxpayer disclosure</li>
+      <li>Multiple agencies/logos</li>
+    </ul>
+
+    <usa-identifier>
+      <a slot="logo" href="https://www.gsa.gov/">
+        <img
+          src="https://designsystem.digital.gov/img/gsa-logo.svg"
+          alt="General Services Administration logo"/>
+      </a>
+      <a slot="logo" href="https://www.gsa.gov/">
+        <img
+          src="https://designsystem.digital.gov/img/gsa-logo.svg"
+          alt="General Services Administration logo"/>
+      </a>
+      <p slot="domain">designsystem.digital.gov</p>
+      <p slot="disclaimer">
+        Un sitio web oficial de <a href="https://gsa.gov/">General Services Administration</a> y
+        <a href="https://gsa.gov/">Other agency</a>.
+        Producido y publicado con dinero de los contribuyentes de impuestos.</p>.
+      </p>
+      <nav slot="links">
+        <a href="https://www.gsa.gov/about-us">Acerca de GSA</a>
+        <a href="https://www.gsa.gov/website-information/accessibility-statement">Declaración de accesibilidad</a>
+        <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia">Solicitud a través de FOIA</a>
+        <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002">Datos de la ley No FEAR</a>
+        <a href="https://www.gsaig.gov/">Oficina del Inspector General</a>
+        <a href="https://www.gsa.gov/reference/reports/budget-performance">Informes de desempeño</a>
+        <a href="https://www.gsa.gov/website-information/website-policies">Política de privacidad</a>
+      </nav>
+      <div slot="usagov">¿Necesita información y servicios del Gobierno? <a href="https://www.usa.gov/espanol/">Visite USA.gov en Español</a></div>
+    </usa-identifier>
+
+  <h2>Option 2: Attribute-based (attribute objects)</h2>
+
+    <h3>Simple implementation</h3>
+    <ul>
+      <li>Default content</li>
+      <li>One agency/logo</li>
+      <li>No taxpayer disclosure</li>
+    </ul>
+
+    <usa-identifier-attributes-object
+      siteDomain="designsystem.digital.gov"
+      parentAgency= '{
+        "name": "General Services Administration",
+        "shortname": "GSA",
+        "url": "https://www.gsa.gov/",
+        "logo": "https://designsystem.digital.gov/img/gsa-logo.svg"
+      }'
+      linkURLs= '{
+        "about": "https://www.gsa.gov/about-us",
+        "accessibility": "https://www.gsa.gov/website-information/accessibility-statement",
+        "NoFEAR": "https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002",
+        "FOIA": "https://www.gsa.gov/reference/freedom-of-information-act-foia",
+        "OIG": "https://www.gsaig.gov/",
+        "performance": "https://www.gsa.gov/reference/reports/budget-performance",
+        "privacy": "https://www.gsa.gov/website-information/website-policies"
+      }'
+    >
+    </usa-identifier-attributes-object>
+
+    <h3>Medium complexity implementation</h3>
+    <ul>
+      <li>USWDS-provided Spanish content</li>
+      <li>One agency</li>
+      <li>No logo</li>
+      <li>Taxpayer disclosure</li>
+    </ul>
+
+    <usa-identifier-attributes-object
+      language="es"
+      taxpayerDisclosure
+      siteDomain="designsystem.digital.gov"
+      parentAgency= '{
+        "name": "General Services Administration",
+        "shortname": "GSA",
+        "url": "https://www.gsa.gov/"
+      }'
+      linkURLs= '{
+        "about": "https://www.gsa.gov/about-us",
+        "accessibility": "https://www.gsa.gov/website-information/accessibility-statement",
+        "NoFEAR": "https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002",
+        "FOIA": "https://www.gsa.gov/reference/freedom-of-information-act-foia",
+        "OIG": "https://www.gsaig.gov/",
+        "performance": "https://www.gsa.gov/reference/reports/budget-performance",
+        "privacy": "https://www.gsa.gov/website-information/website-policies"
+      }'
+    >
+    </usa-identifier-attributes-object>
+
+
+    <h3>High complexity implementation</h3>
+    <ul>
+      <li>User-provided custom content</li>
+      <li>Two agencies/logos</li>
+      <li>Taxpayer disclosure</li>
+    </ul>
+
+
+    <!-- TODO: re-organize these objects to be more intuitive. Don't separate out "langContent" -->
+    <usa-identifier-attributes-object
+      taxpayerDisclosure
+      siteDomain="[French] designsystem.digital.gov"
+      parentAgency= '{
+        "name": "[French] General Services Administration",
+        "shortname": "[French] GSA",
+        "url": "https://www.gsa.gov/",
+        "logo": "https://designsystem.digital.gov/img/gsa-logo.svg"
+      }'
+      secondaryParentAgency= '{
+        "name": "[French] Other agency",
+        "shortname": "OA",
+        "url": "https://www.oa.gov/",
+        "logo": "https://designsystem.digital.gov/assets/img/circle-gray-20.svg"
+      }'
+      langContent= '{
+        "aria_label": "Agency identifier",
+        "disclaimer": "[French] An official website of the",
+        "taxpayer": "[French]Produced and published at taxpayer expense",
+        "conjunction": "et",
+        "linkLabels": {
+          "about": "[French] About",
+          "accessibility": "[French] Accessibility statement",
+          "FOIA": "[French] FOIA requests",
+          "noFEAR": "[French] No FEAR Act data",
+          "OIG": "[French] Office of the Inspector General",
+          "performance": "[French] Performance reports",
+          "privacy": "[French] Privacy policy"
+        },
+        "usagov": {
+          "aria_label": "[French] U.S. government information and services",
+          "description": "[French] Looking for U.S. government information and services?",
+          "link": {
+            "label": "[French] Visit USA.gov",
+            "url": "https://www.usa.gov/"
+          }
+        }
+      }'
+      linkURLs= '{
+        "about": "https://www.gsa.gov/about-us",
+        "accessibility": "https://www.gsa.gov/website-information/accessibility-statement",
+        "NoFEAR": "https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002",
+        "FOIA": "https://www.gsa.gov/reference/freedom-of-information-act-foia",
+        "OIG": "https://www.gsaig.gov/",
+        "performance": "https://www.gsa.gov/reference/reports/budget-performance",
+        "privacy": "https://www.gsa.gov/website-information/website-policies"
+      }'
+    >
+    </usa-identifier-attributes-object>
+
+
+    <h2>Option 3: Attribute-based (flat structure)</h2>
+    <h3>Simple implementation</h3>
+    <ul>
+      <li>Default content</li>
+      <li>One agency/logo</li>
+    </ul>
+
+    <usa-identifier-attributes
+      siteDomain="designsystem.digital.gov"
+      parentName="General Services Administration"
+      parentShortname="GSA"
+      parentHref="https://www.gsa.gov/"
+      parentLogo="https://designsystem.digital.gov/img/gsa-logo.svg"
+      linkAccessibility="https://www.gsa.gov/website-information/accessibility-statement"
+      linkAbout="https://www.gsa.gov/about-us"
+      linkFOIA="https://www.gsa.gov/reference/freedom-of-information-act-foia"
+      linkNoFEAR="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002"
+      linkOIG="https://www.gsaig.gov/"
+      linkPerformance="https://www.gsa.gov/reference/reports/budget-performance"
+      linkPrivacy="https://www.gsa.gov/website-information/website-policies"
+    >
+    </usa-identifier-attributes>
+  </body>
 </html>
diff --git a/web-components/package-lock.json b/web-components/package-lock.json
index 299c1f10..9e0f161a 100644
--- a/web-components/package-lock.json
+++ b/web-components/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "web-components",
       "version": "0.0.0",
+      "workspaces": [
+        "src/components/usa-banner"
+      ],
       "dependencies": {
         "@uswds/uswds": "^3.8.0",
         "lit": "^3.1.2",
@@ -12478,6 +12481,11 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "src/components/usa-banner": {
+      "version": "0.0.1",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "devDependencies": {}
     }
   }
 }
diff --git a/web-components/src/components/usa-identifier-attributes-object/content/index.js b/web-components/src/components/usa-identifier-attributes-object/content/index.js
new file mode 100644
index 00000000..0737e36e
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes-object/content/index.js
@@ -0,0 +1,2 @@
+export { default as DefaultContent } from "./usa-identifier.json";
+export { default as EsContent } from "./usa-identifier~lang-es.json";
diff --git a/web-components/src/components/usa-identifier-attributes-object/content/usa-identifier.json b/web-components/src/components/usa-identifier-attributes-object/content/usa-identifier.json
new file mode 100644
index 00000000..1048e001
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes-object/content/usa-identifier.json
@@ -0,0 +1,23 @@
+{
+  "aria_label": "Agency identifier",
+  "disclaimer":  "An official website of the",
+  "taxpayer": "Produced and published at taxpayer expense",
+  "conjunction": "and",
+  "linkLabels": {
+    "about": "About",
+    "accessibility": "Accessibility statement",
+    "FOIA": "FOIA requests",
+    "noFEAR": "No FEAR Act data",
+    "OIG": "Office of the Inspector General",
+    "performance": "Performance reports",
+    "privacy": "Privacy policy"
+  },
+  "usagov": {
+    "aria_label": "U.S. government information and services",
+    "description": "Looking for U.S. government information and services?",
+    "link": {
+      "label": "Visit USA.gov",
+      "url": "https://www.usa.gov/"
+    }
+  }
+}
diff --git a/web-components/src/components/usa-identifier-attributes-object/content/usa-identifier~lang-es.json b/web-components/src/components/usa-identifier-attributes-object/content/usa-identifier~lang-es.json
new file mode 100644
index 00000000..d6eacc6e
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes-object/content/usa-identifier~lang-es.json
@@ -0,0 +1,23 @@
+{
+  "aria_label": "Identificador de la agencia,",
+  "disclaimer":  "Un sitio web oficial de",
+  "taxpayer": "Producido y publicado con dinero de los contribuyentes de impuestos",
+  "conjunction": "y",
+  "linkLabels": {
+    "about": "Acerca de",
+    "accessibility": "Declaración de accesibilidad",
+    "FOIA": "Solicitud a través de FOIA",
+    "noFEAR": "Datos de la ley No FEAR",
+    "OIG": "Oficina del Inspector General",
+    "performance": "Informes de desempeño",
+    "privacy": "Política de privacidad"
+  },
+  "usagov": {
+    "aria_label": "Información y servicios del Gobierno de EE. UU.,",
+    "description": "¿Necesita información y servicios del Gobierno?",
+    "link": {
+      "label": "Visite USA.gov en Español",
+      "url": "https://www.usa.gov/espanol/"
+    }
+  }
+}
diff --git a/web-components/src/components/usa-identifier-attributes-object/index.js b/web-components/src/components/usa-identifier-attributes-object/index.js
new file mode 100644
index 00000000..8201eb75
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes-object/index.js
@@ -0,0 +1,222 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
+import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
+import { DefaultContent, EsContent } from "./content";
+
+export class UsaIdentifierAttributesObject extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * The language of the component
+       */
+      language: {type: String},
+      /**
+       * The site domain
+       */
+      siteDomain: { type: String },
+      /**
+       * Info about parent agency (optional)
+       */
+      parentAgency: {type: Object},
+      /**
+       * Info about secondary parent agency (optional)
+       */
+      secondaryParentAgency: {type: Object},
+      /**
+       * Custom content
+       */
+      langContent: {type: Object},
+      /**
+       * List of required link urls
+       */
+      linkURLs: {type: Object},
+      /**
+       * Variant that includes taxpayer disclosure
+       */
+      taxpayerDisclosure: {type: Boolean},
+    };
+  }
+
+  static styles = [
+    unsafeCSS(usaIdentifierStyle),
+    unsafeCSS(uswdsCoreStyle)
+  ];
+
+  render() {
+    const linkItemClasses = "usa-identifier__required-links-item";
+    const linkClasses="usa-identifier__required-link usa-link";
+    let content = DefaultContent;
+    let taxpayerContent = '';
+    let logoWrapper;
+    let logo1;
+    let logo2;
+    let name1;
+    let name2;
+    let logos;
+    let names;
+
+    // TODO: Break this up into individual lang content items
+    // Set non-standard content
+    if (this.langContent) {
+      content = this.langContent;
+    } else if (this.language ==="es") {
+      content = EsContent;
+    };
+
+    // Add taxpayer disclosure content
+    if (this.taxpayerDisclosure) {
+      taxpayerContent = `. ${content.taxpayer}.`;
+    }
+
+    // TODO: Streamline these logo/name definitions
+    if (this.parentAgency && this.parentAgency.logo) {
+      logo1 = html`
+        <a class="usa-identifier__logo" href="${this.parentAgency.url}">
+          <img
+            class="usa-identifier__logo-img"
+            src="${this.parentAgency.logo}"
+            alt="${this.parentAgency.name} logo"
+            role="img"/>
+        </a>
+      `
+    }
+
+    if (this.parentAgency && this.parentAgency.name) {
+      name1 = html`
+        <a href="${this.parentAgency.url}">${this.parentAgency.name}</a>
+      `
+    }
+
+    if (this.secondaryParentAgency && this.secondaryParentAgency.logo) {
+      logo2 = html`
+        <a class="usa-identifier__logo" href="${this.secondaryParentAgency.url}">
+          <img
+            class="usa-identifier__logo-img"
+            src="${this.secondaryParentAgency.logo}"
+            alt="${this.secondaryParentAgency.name} logo"
+            role="img"/>
+        </a>
+      `
+    }
+
+    if (this.secondaryParentAgency && this.secondaryParentAgency.name) {
+      name2 = html`
+        <a href="${this.secondaryParentAgency.url}">${this.secondaryParentAgency.name}</a>
+      `
+    }
+
+    // Set agency logos and links
+    if (this.parentAgency && this.secondaryParentAgency) {
+      logos= html`${logo1} ${logo2}`
+      names= html`${name1} ${content.conjunction} ${name2}`
+    } else if (this.parentAgency) {
+      logos= html`${logo1}`
+      names = html`${name1}`
+    } else if (this.secondaryParentAgency) {
+      logos= html`${logo2}`
+      names = html`${name2}`
+    }
+
+    if (logo1 || logo2) {
+      logoWrapper = html`
+        <div class="usa-identifier__logos">
+          ${logos}
+        </div>
+      `
+    }
+
+    return html`
+      <div class="usa-identifier">
+        <section
+          class="usa-identifier__section usa-identifier__section--masthead"
+          aria-label="${content.aria_label}"
+        >
+          <div class="usa-identifier__container">
+            ${logoWrapper}
+            <section
+              class="usa-identifier__identity"
+              aria-label="Agency description,"
+            >
+              <p class="usa-identifier__identity-domain">${this.siteDomain}</p>
+              <p class="usa-identifier__identity-disclaimer">
+                ${content.disclaimer}
+                ${names}${taxpayerContent}
+              </p>
+            </section>
+          </div>
+        </section>
+        <nav
+          class="usa-identifier__section usa-identifier__section--required-links"
+          aria-label="Important links"
+        >
+          <div class="usa-identifier__container">
+            <ul class="usa-identifier__required-links-list">
+              <li class="${linkItemClasses}">
+                <a
+                  href="${this.linkURLs.about}"
+                  class="${linkClasses}"
+                  >${content.linkLabels.about} ${this.parentAgency.shortname}
+                </a>
+              </li>
+              <li class="${linkItemClasses}">
+                <a
+                  href="${this.linkURLs.accessibility}"
+                  class="${linkClasses}"
+                  >${content.linkLabels.accessibility}</a
+                >
+              </li>
+              <li class="${linkItemClasses}">
+                <a
+                  href="${this.linkURLs.FOIA}"
+                  class="${linkClasses}"
+                  >${content.linkLabels.FOIA}</a
+                >
+              </li>
+              <li class="${linkItemClasses}">
+                <a
+                  href="${this.linkURLs.NoFEAR}"
+                  class="${linkClasses}"
+                  >${content.linkLabels.noFEAR}</a
+                >
+              </li>
+              <li class="${linkItemClasses}">
+                <a
+                  href="${this.linkURLs.OIG}"
+                  class="${linkClasses}"
+                  >${content.linkLabels.OIG}</a
+                >
+              </li>
+              <li class="${linkItemClasses}">
+                <a
+                  href="${this.linkURLs.performance}"
+                  class="${linkClasses}"
+                  >${content.linkLabels.performance}</a
+                >
+              </li>
+              <li class="${linkItemClasses}">
+                <a
+                  href="${this.linkURLs.privacy}"
+                  class="${linkClasses}"
+                  >${content.linkLabels.privacy}</a
+                >
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <section
+          class="usa-identifier__section usa-identifier__section--usagov"
+          aria-label="${content.usagov.aria_label}"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__usagov-description">
+              ${content.usagov.description}
+            </div>
+            <a href="${content.usagov.link.url}" class="usa-link">${content.usagov.link.label}</a>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define("usa-identifier-attributes-object", UsaIdentifierAttributesObject);
\ No newline at end of file
diff --git a/web-components/src/components/usa-identifier-attributes-object/package.json b/web-components/src/components/usa-identifier-attributes-object/package.json
new file mode 100644
index 00000000..9829acd6
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes-object/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "usa-identifier-attributes-object",
+  "version": "0.0.1",
+  "description": "USWDS identifier component - attribute-based object",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.md"
+}
diff --git a/web-components/src/components/usa-identifier-attributes/index.js b/web-components/src/components/usa-identifier-attributes/index.js
new file mode 100644
index 00000000..b0d1284d
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes/index.js
@@ -0,0 +1,170 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
+import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
+
+export class UsaIdentifierAttributes extends LitElement {
+
+  static get properties() {
+    return {
+      /**
+       * The site domain
+       */
+      siteDomain: { type: String },
+      /**
+       * The parent agency name
+       */
+      parentName: { type: String },
+      /**
+       * The parent agency acronym or short name
+       */
+      parentShortname: { type: String },
+      /**
+       * The destination URL for the agency and logo link
+       */
+      parentHref: { type: String },
+      /**
+       * The destination URL for the agency and logo link
+       */
+      parentLogo: { type: String },
+      /**
+       * Parent agency about page url
+       */
+      linkAbout: { type: String },
+      /**
+       * Parent agency accessibility statement url
+       */
+      linkAccessibility: { type: String },
+      /**
+       * Parent agency FOIA url
+       */
+      linkFOIA: { type: String },
+      /**
+       * Parent agency No FEAR act url
+       */
+      linkNoFEAR: { type: String },
+      /**
+       * Parent agency Office of Inspector General url
+       */
+      linkOIG: { type: String },
+      /**
+       * Parent agency performance reports url
+       */
+      linkPerformance: { type: String },
+      /**
+       * Parent agency privacy policy url
+       */
+      linkPrivacy: { type: String },
+    };
+  }
+
+  static styles = [
+    unsafeCSS(usaIdentifierStyle),
+    unsafeCSS(uswdsCoreStyle)
+  ];
+
+  render() {
+    return html`
+      <div class="usa-identifier">
+        <section
+          class="usa-identifier__section usa-identifier__section--masthead"
+          aria-label="Agency identifier"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__logos">
+              <a
+                class="usa-identifier__logo"
+                href="${this.parentHref}"
+                ><img
+                  class="usa-identifier__logo-img"
+                  src="${this.parentLogo}"
+                  alt="${this.parentName} logo"
+                  role="img"
+              /></a>
+            </div>
+            <section
+              class="usa-identifier__identity"
+              aria-label="Agency description,"
+            >
+              <p class="usa-identifier__identity-domain">${this.siteDomain}</p>
+              <p class="usa-identifier__identity-disclaimer">
+                <span aria-hidden="true">An </span>official website of the
+                <a href="${this.parentHref}">${this.parentName}</a>
+              </p>
+            </section>
+          </div>
+        </section>
+        <nav
+          class="usa-identifier__section usa-identifier__section--required-links"
+          aria-label="Important links"
+        >
+          <div class="usa-identifier__container">
+            <ul class="usa-identifier__required-links-list">
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.linkAbout}"
+                  class="usa-identifier__required-link usa-link"
+                  >About ${this.parentShortname}</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.linkAccessibility}"
+                  class="usa-identifier__required-link usa-link"
+                  >Accessibility statement</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.linkFOIA}"
+                  class="usa-identifier__required-link usa-link"
+                  >FOIA requests</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.linkNoFEAR}"
+                  class="usa-identifier__required-link usa-link"
+                  >No FEAR Act data</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.linkOIG}"
+                  class="usa-identifier__required-link usa-link"
+                  >Office of the Inspector General</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.linkPerformance}"
+                  class="usa-identifier__required-link usa-link"
+                  >Performance reports</a
+                >
+              </li>
+              <li class="usa-identifier__required-links-item">
+                <a
+                  href="${this.linkPrivacy}"
+                  class="usa-identifier__required-link usa-link"
+                  >Privacy policy</a
+                >
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <section
+          class="usa-identifier__section usa-identifier__section--usagov"
+          aria-label="U.S. government information and services"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__usagov-description">
+              Looking for U.S. government information and services?
+            </div>
+            <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
+          </div>
+        </section>
+      </div>
+    `;
+  }
+}
+
+window.customElements.define("usa-identifier-attributes", UsaIdentifierAttributes);
\ No newline at end of file
diff --git a/web-components/src/components/usa-identifier-attributes/package.json b/web-components/src/components/usa-identifier-attributes/package.json
new file mode 100644
index 00000000..323fc1f0
--- /dev/null
+++ b/web-components/src/components/usa-identifier-attributes/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "usa-identifier-attributes",
+  "version": "0.0.1",
+  "description": "USWDS identifier component - attribute-based",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.md"
+}
diff --git a/web-components/src/components/usa-identifier/identifier.stories.js b/web-components/src/components/usa-identifier/identifier.stories.js
new file mode 100644
index 00000000..b4427bcf
--- /dev/null
+++ b/web-components/src/components/usa-identifier/identifier.stories.js
@@ -0,0 +1,164 @@
+import "./index";
+import { html } from "lit";
+
+export default {
+  title: "Components/Identifier",
+  component: "usa-identifier",
+  argTypes: {
+    primary_agency: { name: "Primary agency information" },
+    logo1: { control: "text", name: "Primary agency logo" },
+    secondary_agency: { name: "Secondary agency information" },
+    logo2: { control: "text", name: "Secondary agency logo" },
+    masthead: { name: "Masthead content" },
+    taxpayer: { name: "Taxpayer disclaimer" },
+    required_links: { name: "Required links" },
+    usagov: { name: "USA.gov information" },
+    main_aria_label: { name: "Component aria-label" },
+  },
+  args: {
+    main_aria_label: "Agency identifier",
+    primary_agency: {
+      name: "[Parent agency]",
+      shortname: "[Agency shortname]",
+      url: "javascipt:void(0)",
+    },
+    logo1: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg",
+    secondary_agency: {
+      name: "[Other agency]",
+      url: "javascipt:void(0)",
+    },
+    logo2: "https://designsystem.digital.gov/assets/img/circle-gray-20.svg",
+    masthead: {
+      aria_label: "Agency description",
+      conjunction: "and",
+      domain: "[domain.gov]",
+      disclaimer: "An official website of the",
+    },
+    taxpayer: "Produced and published at taxpayer expense.",
+    required_links: {
+      aria_label: "Important links",
+      about: "About",
+      accessibility: "Accessibility statement",
+      foia: "FOIA requests",
+      no_FEAR: "No FEAR Act data",
+      oig: "Office of the Inspector General",
+      performance: "Performance reports",
+      privacy: "Privacy policy",
+    },
+    usagov: {
+      text: "Looking for U.S. government information and services?",
+      link_label: "Visit USA.gov",
+      link_url: "https://www.usa.gov/",
+    },
+  },
+  render: ({
+    primary_agency,
+    secondary_agency,
+    logo1,
+    logo2,
+    masthead,
+    taxpayer,
+    required_links,
+    usagov,
+    main_aria_label,
+  }) => html`
+    <usa-identifier aria-label="${main_aria_label}">
+      ${logo1 ? html`
+      <a slot="logo" href="${primary_agency.url}">
+        <img src="${logo1}" alt="${primary_agency.name} logo" />
+      </a>`: null}
+      ${logo2 ? html`
+      <a slot="logo" href="${secondary_agency.url}">
+        <img src="${logo2}" alt="${secondary_agency.name} logo" />
+      </a>`: null}
+      <p slot="disclaimer" aria-label="${masthead.aria_label}">
+        ${masthead.disclaimer}
+        <a href="${primary_agency.url}">${primary_agency.name}</a>
+        ${secondary_agency ? html`${masthead.conjunction} <a href="${secondary_agency.url}">${secondary_agency.name}</a>`: null}${taxpayer ? html`.
+        ${taxpayer}` : null}
+      </p>
+      <nav slot="links" aria-label="${required_links.aria_label}">
+        <a href="">${required_links.about} ${primary_agency.shortname}</a>
+        <a href="">${required_links.accessibility}</a>
+        <a href="">${required_links.foia}</a>
+        <a href="">${required_links.no_FEAR}</a>
+        <a href="">${required_links.oig}</a>
+        <a href="">${required_links.performance}</a>
+        <a href="">${required_links.privacy}</a>
+      </nav>
+      <div slot="usagov">
+        ${usagov.text} <a href="${usagov.link_url}">${usagov.link_label}</a>
+      </div>
+    </usa-identifier>
+  `,
+};
+
+export const Default = {};
+
+export const DefaultSpanish = {
+  args: {
+    main_aria_label: "Identificador de la agencia",
+    masthead: {
+      aria_label: "Descripción de la agencia",
+      conjunction: "y",
+      domain: "[domain.gov]",
+      disclaimer: "Un sitio web oficial de",
+    },
+    taxpayer:
+      "Producido y publicado con dinero de los contribuyentes de impuestos.",
+    required_links: {
+      aria_label: "Enlaces importantes",
+      about: "Acerca de",
+      accessibility: "Declaración de accesibilidad",
+      foia: "Solicitud a través de FOIA",
+      no_FEAR: "Datos de la ley No FEAR",
+      oig: "Oficina del Inspector General",
+      performance: "Informes de desempeño",
+      privacy: "Política de privacidad",
+    },
+    usagov: {
+      text: "¿Necesita información y servicios del Gobierno?",
+      link_label: "Visite USA.gov en Español",
+      link_url: "https://www.usa.gov/espanol/",
+    },
+  },
+};
+
+export const oneAgency = {
+  args: {
+    logo2: false,
+    secondary_agency: false,
+    taxpayer: false,
+  },
+  argTypes: {
+    logo2: { table: { disable: true } },
+    secondary_agency: { table: { disable: true } },
+    taxpayer: { table: { disable: true } },
+  },
+};
+
+export const MultipleAgencies = {
+  args: {
+    taxpayer: false,
+  },
+  argTypes: {
+    taxpayer: { table: { disable: true } },
+  },
+};
+
+export const NoLogo = {
+  args: {
+    logo1: false,
+    logo2: false,
+    secondary_agency: false,
+    taxpayer: false,
+  },
+  argTypes: {
+    logo1: { table: { disable: true } },
+    logo2: { table: { disable: true } },
+    secondary_agency: { table: { disable: true } },
+    taxpayer: { table: { disable: true } },
+  },
+};
+
+export const TaxpayerDisclaimer = {};
diff --git a/web-components/src/components/usa-identifier/index.js b/web-components/src/components/usa-identifier/index.js
new file mode 100644
index 00000000..0504602a
--- /dev/null
+++ b/web-components/src/components/usa-identifier/index.js
@@ -0,0 +1,156 @@
+import { LitElement, html, css, unsafeCSS } from "lit";
+import uswdsCoreStyle from "@uswds/uswds/scss/uswds-core?inline";
+import usaIdentifierStyle from "@uswds/uswds/scss/usa-identifier?inline";
+
+export class UsaIdentifier extends LitElement {
+  static styles = [
+    unsafeCSS(usaIdentifierStyle),
+    unsafeCSS(uswdsCoreStyle),
+    css`
+      .usa-identifier__usagov-description {
+        display: block;
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.domain = this.querySelector('[slot="domain"]');
+    this.logos = [...this.querySelectorAll('[slot="logo"]')];
+    this.links = [...this.querySelector('[slot="links"]').children];
+    this.domain = this.querySelector('[slot="domain"]');
+    this.disclaimer = this.querySelector('[slot="disclaimer"]');
+    this.usagov = this.querySelector('[slot="usagov"]');
+  }
+
+  // Render the logo(s) for the masthead
+  mastheadLogosTemplate() {
+    if (this.logos.length > 0) {
+      return html`
+        <div class="usa-identifier__logos">
+          ${this.logos.map((logo) => {
+            const logoImage = logo.querySelector("img");
+            logo.classList.add("usa-identifier__logo");
+            logoImage.classList.add("usa-identifier__logo-img");
+            return html`${logo}`;
+          })}
+        </div>
+      `;
+    }
+  }
+
+  // Render the text for the masthead
+  mastheadTextTemplate() {
+    /**
+     * Scaffold domain text:
+     * Add necessary classes for styling
+     */
+    if (this.domain) {
+      this.domain.classList.add("usa-identifier__identity-domain");
+    }
+    /**
+     * Scaffold disclaimer text:
+     * Add necessary classes for styling
+     * Wrap "An" in aria-hidden span
+     */
+    if (this.disclaimer) {
+      this.disclaimer.classList.add("usa-identifier__identity-disclaimer");
+    }
+    /**
+     * For English implementations, wrap "An" in an aria-hidden span
+     * This prevents "An official" from sounding like "Unofficial" in audible readouts
+     */
+    if (this.disclaimer.innerHTML.includes("An official")) {
+      this.disclaimer.innerHTML = this.disclaimer.innerHTML.replace(
+        "An official",
+        '<span aria-hidden="true">An</span> official'
+      );
+    }
+
+    if (this.disclaimer || this.domain) {
+      return html`
+        <section
+          class="usa-identifier__identity"
+          aria-label="Agency description"
+        >
+          ${this.domain} ${this.disclaimer}
+        </section>
+      `;
+    }
+  }
+
+  // Render the logos and text in the masthead
+  mastheadTemplate() {
+    if (this.domain || this.disclaimer || this.logos.length > 0) {
+      return html`
+        <section
+          class="usa-identifier__section usa-identifier__section--masthead"
+          aria-label="Agency identifier"
+        >
+          <div class="usa-identifier__container">
+            ${this.mastheadLogosTemplate()} ${this.mastheadTextTemplate()}
+          </div>
+        </section>
+      `;
+    }
+  }
+
+  // Render the list of links
+  linksTemplate() {
+    if (this.links && this.links.length > 0) {
+      return html`
+        <nav
+          class="usa-identifier__section usa-identifier__section--required-links"
+          aria-label="Important links"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__logos">
+              <ul class="usa-identifier__required-links-list">
+                ${this.links.map((link) => {
+                  link.classList.add("usa-identifier__required-link");
+                  return html`<li class="usa-identifier__required-links-item">
+                    ${link}
+                  </li>`;
+                })}
+              </ul>
+            </div>
+          </div>
+        </nav>
+      `;
+    }
+  }
+
+  // Render the footer USA.gov text
+  usagovTemplate() {
+    /**
+     * Scaffold usagov text:
+     * Add necessary classes for styling
+     */
+    if (this.usagov) {
+      const usagovLink = this.usagov.querySelector("a");
+      this.usagov.classList.add("usa-identifier__usagov-description");
+      usagovLink.classList.add("usa-link");
+
+      return html`
+        <section
+          class="usa-identifier__section usa-identifier__section--usagov"
+        >
+          <div class="usa-identifier__container">
+            <div class="usa-identifier__usagov-description">${this.usagov}</div>
+          </div>
+        </section>
+      `;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="usa-identifier">
+        ${this.mastheadTemplate()} ${this.linksTemplate()}
+        ${this.usagovTemplate()}
+      </div>
+    `;
+  }
+}
+
+window.customElements.define("usa-identifier", UsaIdentifier);
diff --git a/web-components/src/components/usa-identifier/package.json b/web-components/src/components/usa-identifier/package.json
new file mode 100644
index 00000000..861cd2f4
--- /dev/null
+++ b/web-components/src/components/usa-identifier/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "usa-identifier",
+  "version": "0.0.1",
+  "description": "USWDS identifier component",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.md"
+}
diff --git a/web-components/src/components/usa-link/index.js b/web-components/src/components/usa-link/index.js
index 94b98246..91c6d17a 100644
--- a/web-components/src/components/usa-link/index.js
+++ b/web-components/src/components/usa-link/index.js
@@ -31,6 +31,15 @@ export class UsaLink extends LitElement {
     this.shadowRoot.appendChild(this.slottedChildren);
   }
 
+  hasLinkChild() {
+    const childLink = this.querySelector("a");
+    if (!childLink) return false;
+
+    this.href = childLink.href;
+    this.slottedChildren = childLink;
+    this.shadowRoot.appendChild(this.slottedChildren);
+  }
+
   constructor() {
     super();
   }
diff --git a/web-components/vite.config.js b/web-components/vite.config.js
index 5c7108aa..e8993258 100644
--- a/web-components/vite.config.js
+++ b/web-components/vite.config.js
@@ -1,6 +1,13 @@
 import { defineConfig } from "vite";
 
 export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        includePaths: ["./node_modules/@uswds/uswds/packages"],
+      },
+    },
+  },
   test: {
     globals: true,
     environment: "jsdom",