diff --git a/src/components/Identifier/Identifier/Identifier.stories.tsx b/src/components/Identifier/Identifier/Identifier.stories.tsx
new file mode 100644
index 0000000000..78e2efd723
--- /dev/null
+++ b/src/components/Identifier/Identifier/Identifier.stories.tsx
@@ -0,0 +1,416 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react'
+
+import { Identifier } from './Identifier'
+import { IdentifierMasthead } from '../IdentifierMasthead/IdentifierMasthead'
+import { IdentifierLinks } from '../IdentifierLinks/IdentifierLinks'
+import { IdentifierGov } from '../IdentifierGov/IdentifierGov'
+import { IdentifierLinkItem } from '../IdentifierLinkItem/IdentifierLinkItem'
+import { IdentifierLink } from '../IdentifierLink/IdentifierLink'
+import { IdentifierLogo } from '../IdentifierLogo/IdentifierLogo'
+
+import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+
+export default {
+ title: 'Components/Identifier',
+ component: Identifier,
+ parameters: {
+ docs: {
+ description: {
+ component: `
+### USWDS 2.0 Identifier component
+
+Source: https://designsystem.digital.gov/components/identifier/
+`,
+ },
+ },
+ },
+}
+
+const testIdentifierLogo = (
+ 
+)
+
+const testIdentifierLogoSpanish = (
+
+)
+
+const testLinks = [
+
+ About <Parent shortname>
+ ,
+
+ Accessibility support
+ ,
+
+ FOIA requests
+ ,
+
+ No FEAR Act data
+ ,
+
+ Office of the Inspector General
+ ,
+
+ Performance reports
+ ,
+
+ Privacy policy
+ ,
+]
+
+const testLinksSpanish = [
+
+ Acerca de <Parent shortname>
+ ,
+
+ Soporte de accesibilidad
+ ,
+
+ Solicitud a través de FOIA
+ ,
+
+ Datos de la ley No FEAR
+ ,
+
+ Oficina del Inspector General
+ ,
+
+ Informes de desempeño
+ ,
+
+ Política de privacidad
+ ,
+]
+
+const testIdentifierGovContent = [
+ ,
+]
+
+const testIdentifierGovContentSpanish = [
+ ,
+]
+
+export const identifierDefault = (): React.ReactElement => (
+
+
+
+
+ {testIdentifierLogo}
+
+
+
+
+ {testIdentifierLogoSpanish}
+
+
+
+
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+
+
+ {testIdentifierLogoSpanish}
+ {testIdentifierLogoSpanish}
+
+
+
+
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+
+
+ {testIdentifierLogo}
+
+
+
domain.edu.mil.gov
+
+ {`An official website of the `}
+ Test Agency Name
+ {`. Produced and published at taxpayer expense.`}
+
+
+
+
+ {testIdentifierLogoSpanish}
+
+
+
domain.edu.mil.gov
+
+ {`Un sitio web oficial de `}
+ Test Agency Name Spanish
+ {`. Producido y publicado con dinero de los contribuyentes de impuestos.`}
+
+
+
+
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+
+
+
+ {testIdentifierLogo}
+
+
+
+
+ domain.edu.mil.gov
+
+
+ {`An official website of the `}
+ Test Agency Name
+
+
+
+
+
+ {testIdentifierLogoSpanish}
+
+
+
+
+
+
+ domain.edu.mil.gov
+
+
+ {`An official website of the `}
+ Test Agency Name
+
+
+
+
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+
+
+ {testIdentifierLogo}
+
+
+
+ domain.edu.mil.gov
+
+
+ {`An official website of the `}
+ Test Agency Name
+ {`. Produced and published at taxpayer expense.`}
+
+
+
+ {children}
+
+ )
+}
+
+export default Identifier
diff --git a/src/components/Identifier/IdentifierGov/IdentifierGov.test.tsx b/src/components/Identifier/IdentifierGov/IdentifierGov.test.tsx
new file mode 100644
index 0000000000..797b8eaec8
--- /dev/null
+++ b/src/components/Identifier/IdentifierGov/IdentifierGov.test.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import renderer from 'react-test-renderer'
+
+import { IdentifierGov } from './IdentifierGov'
+
+describe('IdentifierGov component', () => {
+ it('renders without errors', () => {
+ const { queryByTestId } = render()
+ expect(queryByTestId('identifierGov')).toBeInTheDocument()
+ })
+
+ it('renders section attributes passed in through props', () => {
+ const { queryByTestId } = render(
+
+ )
+
+ expect(queryByTestId('identifierGov')).toHaveAttribute(
+ 'aria-label',
+ 'custom aria-label value'
+ )
+ })
+
+ it('renders consistently in Spanish', () => {
+ const tree = renderer
+ .create(
+
+
+
+ )
+ .toJSON()
+ expect(tree).toMatchSnapshot()
+ })
+})
diff --git a/src/components/Identifier/IdentifierGov/IdentifierGov.tsx b/src/components/Identifier/IdentifierGov/IdentifierGov.tsx
new file mode 100644
index 0000000000..27798945f1
--- /dev/null
+++ b/src/components/Identifier/IdentifierGov/IdentifierGov.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import classnames from 'classnames'
+
+interface IdentifierGovProps {
+ children?: React.ReactNode
+ className?: string
+}
+
+export const IdentifierGov = ({
+ children,
+ className,
+ ...sectionProps
+}: IdentifierGovProps &
+ JSX.IntrinsicElements['section']): React.ReactElement => {
+ const classes = classnames(
+ 'usa-identifier__section usa-identifier__section--usagov',
+ className
+ )
+
+ return (
+
+ )
+}
+
+export default IdentifierGov
diff --git a/src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap b/src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap
new file mode 100644
index 0000000000..faba90b55e
--- /dev/null
+++ b/src/components/Identifier/IdentifierGov/__snapshots__/IdentifierGov.test.tsx.snap
@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IdentifierGov component renders consistently in Spanish 1`] = `
+
+`;
diff --git a/src/components/Identifier/IdentifierLink/IdentifierLink.test.tsx b/src/components/Identifier/IdentifierLink/IdentifierLink.test.tsx
new file mode 100644
index 0000000000..d923926963
--- /dev/null
+++ b/src/components/Identifier/IdentifierLink/IdentifierLink.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { IdentifierLink } from './IdentifierLink'
+
+const testPageName = 'Test Page'
+
+describe('IdentifierLink component', () => {
+ it('renders without errors', () => {
+ const { getByRole, queryByText } = render(
+ {testPageName}
+ )
+ expect(queryByText(testPageName)).toBeInTheDocument()
+ expect(getByRole('link')).toHaveClass(
+ 'usa-identifier__required-link usa-link'
+ )
+ })
+ it('renders with a custom component', () => {
+ type CustomLinkProps = React.PropsWithChildren<{
+ to: string
+ className?: string
+ }> &
+ JSX.IntrinsicElements['a']
+
+ const CustomLink: React.FunctionComponent = ({
+ to,
+ children,
+ className,
+ ...linkProps
+ }: CustomLinkProps): React.ReactElement => (
+
+ {children}
+
+ )
+
+ const { getByRole, queryByText } = render(
+
+ to="#"
+ className="custom-class"
+ asCustom={CustomLink}>
+ {testPageName}
+
+ )
+ expect(queryByText(testPageName)).toBeInTheDocument()
+ expect(getByRole('link')).toHaveClass(
+ 'custom-class usa-identifier__required-link usa-link'
+ )
+ })
+})
diff --git a/src/components/Identifier/IdentifierLink/IdentifierLink.tsx b/src/components/Identifier/IdentifierLink/IdentifierLink.tsx
new file mode 100644
index 0000000000..ac935ad0ba
--- /dev/null
+++ b/src/components/Identifier/IdentifierLink/IdentifierLink.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import {
+ CustomLinkProps,
+ DefaultLinkProps,
+ isCustomProps,
+ Link,
+} from '../../Link/Link'
+
+export function IdentifierLink(props: DefaultLinkProps): React.ReactElement
+export function IdentifierLink(props: CustomLinkProps): React.ReactElement
+export function IdentifierLink({
+ className,
+ ...passThroughProps
+}: DefaultLinkProps | CustomLinkProps): React.ReactElement {
+ const classes = classnames(className, 'usa-identifier__required-link')
+ const linkProps = {
+ ...passThroughProps,
+ className: classes,
+ } as DefaultLinkProps | CustomLinkProps
+
+ if (isCustomProps(linkProps)) {
+ return {...linkProps} />
+ }
+
+ return
+}
diff --git a/src/components/Identifier/IdentifierLinkItem/IdentifierLinkItem.test.tsx b/src/components/Identifier/IdentifierLinkItem/IdentifierLinkItem.test.tsx
new file mode 100644
index 0000000000..42c1ea89b9
--- /dev/null
+++ b/src/components/Identifier/IdentifierLinkItem/IdentifierLinkItem.test.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { IdentifierLink } from '../IdentifierLink/IdentifierLink'
+import { IdentifierLinkItem } from '../IdentifierLinkItem/IdentifierLinkItem'
+
+describe('IdentifierLinkItem component', () => {
+ it('renders without errors', () => {
+ const { getByRole, queryByText } = render(
+ Test Page
+ )
+ expect(queryByText('Test Page')).toBeInTheDocument()
+ expect(getByRole('listitem')).toHaveClass(
+ 'usa-identifier__required-links-item'
+ )
+ })
+
+ it('renders properly with IdentifierLink', () => {
+ const { getByRole, queryByText } = render(
+
+ Test Page
+
+ )
+ expect(queryByText('Test Page')).toBeInTheDocument()
+ expect(getByRole('listitem')).toHaveClass(
+ 'usa-identifier__required-links-item'
+ )
+ })
+})
diff --git a/src/components/Identifier/IdentifierLinkItem/IdentifierLinkItem.tsx b/src/components/Identifier/IdentifierLinkItem/IdentifierLinkItem.tsx
new file mode 100644
index 0000000000..c91e623f93
--- /dev/null
+++ b/src/components/Identifier/IdentifierLinkItem/IdentifierLinkItem.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export interface IdentifierLinkItemProps {
+ children: React.ReactNode
+ className?: string
+}
+
+export const IdentifierLinkItem = ({
+ children,
+ className,
+ ...listItemProps
+}: IdentifierLinkItemProps &
+ JSX.IntrinsicElements['li']): React.ReactElement => {
+ const classes = classnames('usa-identifier__required-links-item', className)
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/Identifier/IdentifierLinks/IdentifierLinks.test.tsx b/src/components/Identifier/IdentifierLinks/IdentifierLinks.test.tsx
new file mode 100644
index 0000000000..4b03c8c1dd
--- /dev/null
+++ b/src/components/Identifier/IdentifierLinks/IdentifierLinks.test.tsx
@@ -0,0 +1,72 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { IdentifierLinks } from './IdentifierLinks'
+import { IdentifierLinkItem } from '../IdentifierLinkItem/IdentifierLinkItem'
+import { IdentifierLink } from '../IdentifierLink/IdentifierLink'
+
+const testPageName = 'Test Page'
+
+describe('IdentifierLinks component', () => {
+ it('renders without errors', () => {
+ const { getByRole, queryByText } = render(
+
+ {testPageName}
+
+ )
+ expect(getByRole('listitem')).toHaveClass(
+ 'usa-identifier__required-links-item'
+ )
+ expect(queryByText('Test Page')).toBeInTheDocument()
+ })
+
+ it('renders properly with IdentifierLinkItem and IdentifierLink components', () => {
+ const { getAllByRole, queryByText } = render(
+
+
+ {testPageName}
+
+
+ Second Test Page
+
+
+ Third Test Page
+
+
+ )
+ expect(getAllByRole('link')).toHaveLength(3)
+ expect(queryByText('Test Page')).toBeInTheDocument()
+ })
+
+ it('renders properly with subcomponents using custom elements', () => {
+ type CustomLinkProps = React.PropsWithChildren<{
+ to: string
+ className?: string
+ }> &
+ JSX.IntrinsicElements['a']
+
+ const CustomLink: React.FunctionComponent = ({
+ to,
+ children,
+ className,
+ ...linkProps
+ }: CustomLinkProps): React.ReactElement => (
+
+ {children}
+
+ )
+
+ const { getByRole, queryByText } = render(
+
+
+ to="#" asCustom={CustomLink}>
+ {testPageName}
+
+
+
+ )
+ expect(queryByText('Test Page')).toBeInTheDocument()
+ expect(getByRole('link')).toBeInTheDocument()
+ expect(getByRole('list')).toBeInTheDocument()
+ })
+})
diff --git a/src/components/Identifier/IdentifierLinks/IdentifierLinks.tsx b/src/components/Identifier/IdentifierLinks/IdentifierLinks.tsx
new file mode 100644
index 0000000000..14d45f04f1
--- /dev/null
+++ b/src/components/Identifier/IdentifierLinks/IdentifierLinks.tsx
@@ -0,0 +1,36 @@
+import React, { ReactElement } from 'react'
+import classnames from 'classnames'
+import { IdentifierLinkItemProps } from '../IdentifierLinkItem/IdentifierLinkItem'
+
+interface IdentifierLinksProps {
+ children:
+ | ReactElement
+ | ReactElement[]
+ className?: string
+ navProps?: JSX.IntrinsicElements['nav']
+ listProps?: JSX.IntrinsicElements['ul']
+}
+
+export const IdentifierLinks = ({
+ children,
+ className,
+ navProps,
+ listProps,
+}: IdentifierLinksProps): React.ReactElement => {
+ const classes = classnames(
+ 'usa-identifier__section usa-identifier__section--required-links',
+ className
+ )
+
+ return (
+
+ )
+}
+
+export default IdentifierLinks
diff --git a/src/components/Identifier/IdentifierLogo/IdentifierLogo.test.tsx b/src/components/Identifier/IdentifierLogo/IdentifierLogo.test.tsx
new file mode 100644
index 0000000000..275318f58c
--- /dev/null
+++ b/src/components/Identifier/IdentifierLogo/IdentifierLogo.test.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+
+import { IdentifierLogo } from './IdentifierLogo'
+
+describe('IdentifierLogo component', () => {
+ it('renders without errors', () => {
+ const { getByRole } = render(
+
+
+
+ )
+
+ expect(getByRole('link')).toHaveClass('usa-identifier__logo')
+ expect(getByRole('img')).toHaveClass('usa-identifier__logo-img')
+ })
+
+ it('renders with a custom className', () => {
+ const { getByRole } = render(
+
+
+
+ )
+
+ expect(getByRole('img')).toHaveProperty('alt', 'Test Agency Name logo')
+ expect(getByRole('link')).toHaveClass(
+ 'usa-identifier__logo-custom-class-name'
+ )
+ expect(getByRole('link')).toHaveProperty('href')
+ })
+
+ it('renders a logo in Spanish', () => {
+ const { getByRole } = render(
+
+
+
+ )
+
+ expect(getByRole('img')).toHaveProperty('alt', 'Logo de Test Agency Name')
+ })
+})
diff --git a/src/components/Identifier/IdentifierLogo/IdentifierLogo.tsx b/src/components/Identifier/IdentifierLogo/IdentifierLogo.tsx
new file mode 100644
index 0000000000..c687935579
--- /dev/null
+++ b/src/components/Identifier/IdentifierLogo/IdentifierLogo.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export interface IdentifierLogoProps {
+ children: React.ReactNode
+ className?: string
+}
+
+export const IdentifierLogo = ({
+ children,
+ className,
+ ...anchorProps
+}: IdentifierLogoProps & JSX.IntrinsicElements['a']): React.ReactElement => {
+ const classes = classnames('usa-identifier__logo', className)
+ return (
+
+ {children}
+
+ )
+}
diff --git a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx
new file mode 100644
index 0000000000..126d1146c3
--- /dev/null
+++ b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.test.tsx
@@ -0,0 +1,107 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import dotGovIcon from 'uswds/src/img/icon-dot-gov.svg'
+
+import { IdentifierMasthead } from './IdentifierMasthead'
+import { IdentifierLogo } from '../IdentifierLogo/IdentifierLogo'
+
+const testIdentifierLogo = [
+ ,
+]
+
+const testIdentifierLogoSpanish = [
+ ,
+]
+
+describe('IdentifierMasthead component', () => {
+ it('renders without errors', () => {
+ const { getAllByRole, queryByTestId } = render(
+
+
+
+
+ {testIdentifierLogo}
+
+
+
+
+ domain.edu.mil.gov
+
+
+ {`An official website of the `}
+ Test Agency Name
+
+
+
+
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+ {testIdentifierLogo}
+
+
+