diff --git a/packages/vanilla/src/components/typography/divider.stories.js b/packages/vanilla/src/components/typography/divider.stories.js
new file mode 100644
index 00000000..810e1b8a
--- /dev/null
+++ b/packages/vanilla/src/components/typography/divider.stories.js
@@ -0,0 +1,49 @@
+export default {
+  title: 'Patterns/Divider',
+  argTypes: {
+    title: { 
+      name: 'Divider Title',
+      description: 'Title of the divider',
+      control: 'text' 
+    },
+    dividerLevel: {
+      name: 'Divider Level',
+      description: 'Select a divider level',
+      control: 'select',
+      options: ['xl', 'lg', 'md', 'sm', 'xs']
+    },
+    headingLevel: {
+      name: 'Heading Level',
+      description: 'Select a heading level',
+      control: 'select',
+      options: ['h2', 'h3', 'h4', 'h5', 'h6']
+    }
+  },
+};
+
+const DividerTemplate = ({ title, dividerLevel, headingLevel }) => {
+  return `
+    <${headingLevel} class="cbp-divider-text cbp-divider-text--${dividerLevel}">${title}</${headingLevel}>
+  `;
+};
+
+const DividerFillTemplate = ({ title, dividerLevel, headingLevel }) => {
+  return `
+    <${headingLevel} class="cbp-divider-fill cbp-divider-fill--${dividerLevel}">${title}</${headingLevel}>
+  `;
+};
+
+export const Text = DividerTemplate.bind({});
+Text.args = {
+  title: 'Example Text Divider',
+  dividerLevel: 'xl',
+  headingLevel: 'h2'
+};
+
+export const Fill = DividerFillTemplate.bind({});
+Fill.args = {
+  title: 'Example Text Divider w/ Fill',
+  dividerLevel: 'xl',
+  headingLevel: 'h2'
+};
+Fill.storyName = "Text w/ Fill";
diff --git a/packages/vanilla/src/sass/typography/_dividers.scss b/packages/vanilla/src/sass/typography/_dividers.scss
new file mode 100644
index 00000000..ec8db850
--- /dev/null
+++ b/packages/vanilla/src/sass/typography/_dividers.scss
@@ -0,0 +1,62 @@
+.cbp-divider-text {
+  border-bottom-color: var(--cbp-color-gray-cool-30);
+  border-bottom-style: solid;
+  border-bottom-width: var(--cbp-border-size-md);
+  color: var(--cbp-color-text-darker);
+  font-weight: var(--cbp-font-weight-regular);
+  padding: var(--cbp-space-3x) var(--cbp-space-3x) var(--cbp-space-3x) 0;
+}
+
+.cbp-divider-fill {
+  background-color: var(--cbp-color-gray-cool-10);
+  border-radius: var(--cbp-border-radius-soft);
+  color: var(--cbp-color-text-darker);
+  font-size: var(--cbp-font-size-heading-xl);
+  font-weight: var(--cbp-font-weight-regular);
+  padding: var(--cbp-space-3x);
+}
+
+.cbp-divider-text--xl,
+.cbp-divider-fill--xl {
+  font-size: var(--cbp-font-size-heading-xl);
+}
+
+.cbp-divider-text--lg,
+.cbp-divider-fill--lg {
+  font-size: var(--cbp-font-size-heading-lg);
+}
+
+.cbp-divider-text--md,
+.cbp-divider-fill--md {
+  font-size: var(--cbp-font-size-heading-md);
+  font-weight: var(--cbp-font-weight-medium);
+  padding-top: var(--cbp-space-2x);
+  padding-bottom: var(--cbp-space-2x);
+}
+
+.cbp-divider-text--sm,
+.cbp-divider-fill--sm {
+  font-size: var(--cbp-font-size-heading-sm);
+  font-weight: var(--cbp-font-weight-medium);
+  padding-top: var(--cbp-space-1x);
+  padding-bottom: var(--cbp-space-1x);
+}
+
+.cbp-divider-text--sm {
+  border-bottom-width: var(--cbp-border-size-sm);
+}
+
+.cbp-divider-text--xs {
+  border-bottom-width: var(--cbp-border-size-sm);
+  font-size: var(--cbp-font-size-heading-xs);
+  font-weight: var(--cbp-font-weight-bold);
+  padding-top: var(--cbp-space-1x);
+  padding-bottom: var(--cbp-space-1x);
+  padding-right: var(--cbp-space-2x);
+}
+
+.cbp-divider-fill--xs {
+  font-size: var(--cbp-font-size-heading-xs);
+  font-weight: var(--cbp-font-weight-bold);
+  padding: var(--cbp-space-1x) var(--cbp-space-2x);
+}
\ No newline at end of file
diff --git a/packages/vanilla/src/sass/typography/_index.scss b/packages/vanilla/src/sass/typography/_index.scss
index d551ff06..051cd3c1 100644
--- a/packages/vanilla/src/sass/typography/_index.scss
+++ b/packages/vanilla/src/sass/typography/_index.scss
@@ -1,4 +1,5 @@
 @use './fonts';
+@use 'dividers';
 
 @use './font-face/roboto';
 @use './font-face/roboto-italic';
\ No newline at end of file