diff --git a/src/components/InlineNotification/InlineNotification-v2.module.css b/src/components/InlineNotification/InlineNotification-v2.module.css
new file mode 100644
index 000000000..99b900f61
--- /dev/null
+++ b/src/components/InlineNotification/InlineNotification-v2.module.css
@@ -0,0 +1,51 @@
+@import '../../design-tokens/mixins.css';
+
+/*------------------------------------*\
+    # INLINE NOTIFICATION
+\*------------------------------------*/
+
+/**
+ * A messaging element that is used inline.
+ */
+.inline-notification {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: calc(var(--eds-theme-border-radius-objects-sm) * 1px);
+
+  border: 0.125rem solid;
+  border-left: 0.5rem solid;
+
+  /* NOTE: by specifying no default color for borders, they inherit from color below */
+  &.inline-notification--status-informational {
+    color: var(--eds-theme-color-text-utility-informational);
+    background-color: var(--eds-theme-color-background-utility-information-low-emphasis);
+  }
+
+  &.inline-notification--status-critical {
+    color: var(--eds-theme-color-text-utility-critical);
+    background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+  }
+
+  &.inline-notification--status-favorable {
+    color: var(--eds-theme-color-text-utility-favorable);
+    background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+  }
+
+  &.inline-notification--status-warning {
+    color: var(--eds-theme-color-text-utility-warning);
+    background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
+  }
+}
+
+.inline-notification__icon {
+  flex-shrink: 0;
+}
+
+.inline-notification__body {
+  flex-grow: 2;
+}
+
+.inline-notification__sub-title {
+  color: var(--eds-theme-color-text-utility-default-secondary)
+}
diff --git a/src/components/InlineNotification/InlineNotification-v2.stories.ts b/src/components/InlineNotification/InlineNotification-v2.stories.ts
new file mode 100644
index 000000000..ebb377baa
--- /dev/null
+++ b/src/components/InlineNotification/InlineNotification-v2.stories.ts
@@ -0,0 +1,52 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { InlineNotification } from './InlineNotification-v2';
+
+export default {
+  title: 'Components/V2/InlineNotification',
+  component: InlineNotification,
+  parameters: {
+    badges: ['intro-1.0', 'current-2.0'],
+  },
+  args: {
+    title: 'Inline notifications lorem ipsum text',
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof InlineNotification>;
+
+export const Default: StoryObj<Args> = {};
+
+export const WithSubTitle: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    subTitle: 'Additional text which provides additional detail',
+  },
+};
+
+export const Favorable: StoryObj<Args> = {
+  args: {
+    ...WithSubTitle.args,
+    status: 'favorable',
+  },
+};
+
+export const Warning: StoryObj<Args> = {
+  args: {
+    ...WithSubTitle.args,
+    status: 'warning',
+  },
+};
+
+export const Critical: StoryObj<Args> = {
+  args: {
+    ...WithSubTitle.args,
+    status: 'critical',
+  },
+};
+
+export const LongText: StoryObj<Args> = {
+  args: {
+    title:
+      'Long text inline notification. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  },
+};
diff --git a/src/components/InlineNotification/InlineNotification-v2.tsx b/src/components/InlineNotification/InlineNotification-v2.tsx
new file mode 100644
index 000000000..a307a9d3a
--- /dev/null
+++ b/src/components/InlineNotification/InlineNotification-v2.tsx
@@ -0,0 +1,101 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import type { Status } from '../../util/variant-types';
+
+import Icon, { type IconName } from '../Icon';
+import Text from '../Text';
+
+import styles from './InlineNotification-v2.module.css';
+
+/**
+ * TODO-AH:
+ * - feedback on api naming in figma
+ * - handling of aria-live for a11y
+ */
+
+type InlineNotificationProps = {
+  // Component API
+  /**
+   * CSS class names that can be appended to the component for styling.
+   */
+  className?: string;
+  // Design API
+  /**
+   * The text contents of the tag, nested inside the component, in addition to the icon.
+   */
+  title: string;
+  /**
+   * Text used for the main description of the notification
+   */
+  status?: Status;
+  /**
+   * Secondary text used to describe the notification in more detail
+   */
+  subTitle?: string;
+};
+
+/**
+ * Map statuses to existing icon names
+ * @param status component status
+ * @returns the matching icon name
+ */
+function getIconNameFromStatus(status: Status): IconName {
+  const map: Record<Status, IconName> = {
+    informational: 'info',
+    critical: 'dangerous',
+    warning: 'warning',
+    favorable: 'check-circle',
+  };
+  return map[status];
+}
+
+/**
+ * `import {InlineNotification} from "@chanzuckerberg/eds";`
+ *
+ * This component provides an inline banner accompanied with an icon for messaging users.
+ */
+export const InlineNotification = ({
+  className,
+  status = 'informational',
+  subTitle,
+  title,
+  ...other
+}: InlineNotificationProps) => {
+  const componentClassName = clsx(
+    styles['inline-notification'],
+    status && styles[`inline-notification--status-${status}`],
+    className,
+  );
+
+  return (
+    <div className={componentClassName} {...other}>
+      <Icon
+        className={styles['inline-notification__icon']}
+        name={getIconNameFromStatus(status)}
+        purpose="decorative"
+        size="1rem"
+      />
+      <div className={styles['inline-notication__body']}>
+        <Text
+          as="div"
+          className={styles[`inline-notification__title`]}
+          preset="title-xs"
+        >
+          {title}
+        </Text>
+        {subTitle && (
+          <Text
+            as="div"
+            className={styles[`inline-notification__sub-title`]}
+            preset="body-xs"
+          >
+            {subTitle}
+          </Text>
+        )}
+      </div>
+    </div>
+  );
+};
+
+InlineNotification.displayName = 'InlineNotification';
diff --git a/src/util/variant-types.ts b/src/util/variant-types.ts
index a7d426668..fe540f09e 100644
--- a/src/util/variant-types.ts
+++ b/src/util/variant-types.ts
@@ -24,6 +24,11 @@ export type Align = 'left' | 'center' | 'right';
  */
 export type Hint = 'none' | 'required' | 'optional';
 
+/**
+ * Statuses tied to the state of information being displayed
+ */
+export type Status = 'informational' | 'warning' | 'favorable' | 'critical';
+
 /**
  * List of tier-2 and -3 tokens for use in types:
  * - src/design-tokens/tier-2-usage/typography.json