diff --git a/packages/cxl-lumo-styles/scss/_mixins.scss b/packages/cxl-lumo-styles/scss/_mixins.scss
index fb085b8c2..6f229ea94 100644
--- a/packages/cxl-lumo-styles/scss/_mixins.scss
+++ b/packages/cxl-lumo-styles/scss/_mixins.scss
@@ -43,3 +43,75 @@
     max-width: $max-width;
   }
 }
+
+@mixin wide-background {
+  position: relative;
+  overflow-x: hidden;
+  background: unset !important;
+
+  &::before {
+    position: absolute;
+    bottom: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    content: "";
+    border-radius: calc(6 * var(--lumo-border-radius-l))
+
+  }
+}
+
+@mixin extend-background-left {
+  background-position: bottom right calc(50vw + clamp(48px,5%,100px)) !important;
+
+  &::before {
+    right: 50%;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+@mixin extend-background-right {
+  background-position: bottom left calc(50vw + clamp(48px,5%,100px)) !important;
+
+  &::before {
+    left: 50%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+@mixin wide-background-hero {
+  &::before {
+    height: clamp(164px, calc(2 * var(--figure-height-factor)), calc(100 * var(--figure-height-factor))/2);
+    bottom: 50%;
+    transform: translateY(50%);
+  }
+}
+
+// Use ::after pseudo element to add hero background image. url must be set to CSS custom property --cxl-hero-image
+@mixin wide-background-hero-image {
+  &::after {
+    content: "";
+    position: absolute;
+    left: 55%;
+    width: 100%;
+    height: clamp(calc(50% + 82px), calc(50% + var(--figure-height-factor)), calc(50% + var(--figure-height-factor)));
+    max-height: calc(50% + var(--figure-height-factor));
+    background-image: var(--cxl-hero-image);
+    background-repeat: no-repeat;
+    background-size: auto clamp(65%, 40vw, 100%) ;
+    background-position-x: left;
+    background-position-y: bottom;
+    overflow: visible;
+    z-index: -1;
+    bottom: 50%;
+    transform: translateY(var(--figure-height-factor));
+  }
+}
+
+@mixin wide-background-color($background-color: var(--lumo-base-color)) {
+  &::before {
+    background-color: $background-color;
+  }
+}
diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss
index f70ee2e01..eeafa5444 100644
--- a/packages/cxl-lumo-styles/scss/color.scss
+++ b/packages/cxl-lumo-styles/scss/color.scss
@@ -1,12 +1,17 @@
 html,
 :host {
+  --cxl-brand-color-black: #1a1a1a;
+  --cxl-brand-color-green: #007951;
+  --cxl-brand-color-light-blue: #cce7ff;
+  --cxl-brand-color-blue: #65abc3;
+
   /**
    * Primary
    *
    * @see https://github.com/vaadin/vaadin-lumo-styles/blob/v1.5.0/color.html#L57
    */
   --lumo-primary-color: hsl(355.8, 74.7%, 48%);
-  --lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 0.02);
+  --lumo-primary-color-2pct: hsla(0, 0%, 4%, 0.02);
   --lumo-primary-color-10pct: hsla(355.8, 74.7%, 48%, 0.1);
   --lumo-primary-color-20pct: hsla(355.8, 74.7%, 48%, 0.2);
   --lumo-primary-color-50pct: hsla(355.8, 74.7%, 48%, 0.5);
diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
index f53abf6ac..781684aa7 100644
--- a/packages/cxl-lumo-styles/scss/typography.scss
+++ b/packages/cxl-lumo-styles/scss/typography.scss
@@ -68,59 +68,6 @@ h1 {
 h2 {
   font-size: var(--cxl-lumo-font-size-xxl);
   line-height: var(--cxl-lumo-line-height-xxs);
-
-  &.wp-block-heading {
-    &.separator {
-      &::after {
-        display: block;
-        width: 33%;
-        height: 3px;
-        margin: 1.5em auto 1.5em 0;
-        font-size: 16px;
-        content: "";
-        background: var(--lumo-primary-color);
-      }
-    }
-
-
-    &.separator-wide {
-      &::after {
-        width: 100%;
-      }
-    }
-
-    &.center {
-      text-align: center;
-      &::after {
-        margin: 1.5em auto;
-      }
-    }
-
-    &.right {
-      text-align: right;
-      &::after {
-        margin: 1.5em 0 1.5em auto;
-      }
-    }
-
-    &.separator-white {
-      &::after {
-        background: #fff;
-      }
-    }
-
-    &.separator-black {
-      &::after {
-        background: #000;
-      }
-    }
-
-    &.separator-gray {
-      &::after {
-        background: var(--lumo-contrast-20pct);
-      }
-    }
-  }
 }
 
 h3 {
diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss
index e3e13997e..e2f615e47 100644
--- a/packages/cxl-ui/scss/cxl-section.scss
+++ b/packages/cxl-ui/scss/cxl-section.scss
@@ -3,6 +3,8 @@
 
 :host {
   display: block;
+  --figure-height-multiplier: 0.10;
+  --figure-height-factor: calc(var(--figure-height-multiplier) * var(--cxl-content-max-width-wide));
 }
 
 :host([theme~="cxl-section-dashboard-team-content"]) {
@@ -56,3 +58,65 @@
     --lumo-header-text-color: var(--lumo-tint);
   }
 }
+
+:host(#view-hero),
+:host([theme~="cxl-hero"]) {
+  margin-top: var(--lumo-space-xl);
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+
+@media #{mq.$medium} {
+  :host(#view-hero) {
+    @include mixins.wide-background();
+    @include mixins.extend-background-right();
+    @include mixins.wide-background-hero();
+    @include mixins.wide-background-hero-image();
+  }
+
+  :host([theme~="cxl-hero"]) {
+    @include mixins.wide-background();
+    @include mixins.extend-background-right();
+    @include mixins.wide-background-hero();
+    @include mixins.wide-background-hero-image();
+  }
+
+  :host(.wide-background) {
+    @include mixins.wide-background();
+  }
+
+  :host(.wide-background-hero) {
+    @include mixins.wide-background-hero();
+  }
+
+  :host(.wide-background-hero-image) {
+    @include mixins.wide-background-hero-image();
+  }
+
+  :host(.wide-background-left) {
+    @include mixins.extend-background-left();
+  }
+
+  :host(.wide-background-right) {
+    @include mixins.extend-background-right();
+  }
+
+  :host(.wide-background-black) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-black));
+  }
+
+  :host(.wide-background-red) {
+    @include mixins.wide-background-color(var(--lumo-primary-color));
+  }
+
+  :host(.wide-background-blue) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-blue));
+  }
+
+  :host(.wide-background-light-blue) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-light-blue));
+  }
+
+  :host(.wide-background-green) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-green));
+  }
+}
diff --git a/packages/cxl-ui/scss/global/cxl-section.scss b/packages/cxl-ui/scss/global/cxl-section.scss
new file mode 100644
index 000000000..295ba9ef8
--- /dev/null
+++ b/packages/cxl-ui/scss/global/cxl-section.scss
@@ -0,0 +1,34 @@
+/* stylelint-disable selector-no-qualifying-type */
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+cxl-section#view-hero, cxl-section[theme~="cxl-hero"] {
+  .column-1 {
+    @media #{mq.$medium} {
+      max-width: 45%;
+    }
+  }
+
+  &.wide-background-black,
+  &.wide-background-red,
+  &.wide-background-blue,
+  &.wide-background-green {
+
+    .column-2 * {
+      color: var(--lumo-tint);
+    }
+  }
+
+  &.wide-background-light-blue {
+    #view-hero .cxl-hero-titles {
+      bottom: 0;
+      transform: translateY(50%);
+    }
+
+    .column-2 {
+      * {
+        color: var(--lumo-shade);
+      }
+    }
+  }
+
+}
diff --git a/packages/cxl-ui/src/components/cxl-section.js b/packages/cxl-ui/src/components/cxl-section.js
index b4cfa6349..9965e024f 100644
--- a/packages/cxl-ui/src/components/cxl-section.js
+++ b/packages/cxl-ui/src/components/cxl-section.js
@@ -1,8 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
+import cxlSectionGlobalStyles from '../styles/global/cxl-section-css';
 
 @customElement('cxl-section')
 export class CXLSectionElement extends LitElement {
@@ -17,4 +19,15 @@ export class CXLSectionElement extends LitElement {
       </section>
     `;
   }
+
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    /**
+     * Global styles.
+     */
+    registerGlobalStyles(cxlSectionGlobalStyles, {
+      moduleId: 'cxl-section',
+    });
+  }
 }
diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js
index 7f3a641e9..1627a3333 100644
--- a/packages/storybook/cxl-lumo-styles/typography.stories.js
+++ b/packages/storybook/cxl-lumo-styles/typography.stories.js
@@ -79,6 +79,29 @@ export const CXLComExamples = () => html`
       --cxl-content-max-width: 60em;
     }
 
+    #view-hero {
+      margin-bottom: 4em;
+    }
+
+    .pure-u-lg-1-2 {
+      width: 40%;
+      display: inline-block;
+      letter-spacing: normal;
+      word-spacing: normal;
+      vertical-align: top;
+      text-rendering: auto;
+    }
+
+    .wp-block-cxl-section#view-hero {
+      --cxl-content-max-width: 85em;
+
+      background: url(http://localhost:8080/wp-content/uploads/2023/07/ben-labay_team_headshot-1x1-bw-min.png) no-repeat bottom right var(--lumo-shade-5pct);
+      background-size: auto 85%;
+      background-position: bottom right calc( 45% - 200px );
+
+      padding: unset;
+    }
+
     .flex {
       display: flex;
     }
@@ -100,8 +123,8 @@ export const CXLComExamples = () => html`
     }
   </style>
 
-  <cxl-section class="hero has-black-background-color">
-    <div>
+  <cxl-section id="view-hero" class="wide hero wp-block-cxl-section wide-background-black">
+    <div class="pure-u-lg-1-2">
       <h1><strong>Top 1% marketers</strong> teach you what they know.</h1>
       <h3>Master the most in-demand marketing skills with our online courses created by marketers with a proven record of driving real growth.</h3>
       <vaadin-button id="cxl-onboarding" class="cxl-homepage-button" role="button" theme="primary x-large">
diff --git a/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js b/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js
new file mode 100644
index 000000000..9511da14a
--- /dev/null
+++ b/packages/storybook/cxl-ui/cxl-section/cxl-section.stories.js
@@ -0,0 +1,147 @@
+/* eslint-disable no-multi-str */
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import '@conversionxl/cxl-lumo-styles';
+import '@conversionxl/cxl-ui';
+import '@vaadin/button';
+
+export default {
+  title: 'CXL UI/cxl-section',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Use `<cxl-section theme="cxl-header">` to create a section header component. \
+          `cxl-section` components with id="view-hero" are automatically themed as hero headers. \
+          Additionally, it is necessary to custom CSS code on cxl-section element, for each page: \
+          \
+          \
+           <style> \
+            cxl-section { \
+              --cxl-hero-image: url([wpv-post-featured-image size="large" output="url"]) \
+            } \
+          </style> \
+        ',
+      },
+    }
+  }
+};
+
+export const CXLSectionHeader = (args) => html`
+  <style>
+    @media only screen and (min-width: 1440px) {
+      #view-hero .cxl-hero-titles { bottom: -10px; gap: 0; margin: 0; position: absolute; width: 50%; }
+    }
+
+    @media only screen and (min-width: 1280px) and (max-width: 1440px) {
+      #view-hero .cxl-hero-titles { bottom: 0; gap: 0; margin: 0; position: absolute; width: 55%; }
+    }
+
+    @media only screen and (min-width: 782px) and (max-width: 1280px) {
+      #view-hero .cxl-hero-titles { gap: 0; margin: 0; position: absolute; top: 24em; width: 50%; }
+    }
+
+    .wp-block-columns {
+      align-items: normal !important;
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap !important;
+      margin-bottom: 1.import { column } from '@wordpress/icons' 75em;
+    }
+
+    .wp-clock-column {
+      flex-grow: 1;
+      min-width: 0;
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+
+    cxl-section.wide {
+      --cxl-content-max-width: var(--cxl-content-max-width-wide);
+    }
+
+    .entry-content #view-hero p {
+      font-style: revert;
+    }
+
+    .wp-block-spacer {
+      height: 48px;
+    }
+
+    @media screen and (min-width: 1024px) {
+      cxl-section#view-hero::after {
+        background-image: url("https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-1024x1024.png");
+      }
+    }
+  </style>
+
+  <cxl-section id="view-hero" class="${args.backgroundColor} wide">
+    <div class="wp-block-columns">
+      <div class="wp-block-column column-1 column-span-1 column-push-0">
+        <h1>${unsafeHTML(args.title)}</h1>
+        <h3>${unsafeHTML(args.subtitle)}</h3>
+        <div class="wp-block-spacer"></div>
+        ${args.description ? html`<p>${args.description}</p>` : null}
+        <div class="wp-block-spacer"></div>
+        ${args.ctaLabel
+          ? html`
+            <a href="${args.ctaUrl}">
+              <vaadin-button
+                id="cxl-onboarding"
+                class="cxl-homepage-button"
+                role="button"
+                theme="primary x-large"
+              >
+                ${args.ctaLabel}
+              </vaadin-button>
+            </a>
+            `
+          : null}
+
+      </div>
+      <div
+        class="column column-2 column-span-1 column-push-0 pure-u-lg-1-2 pure-hidden-xs pure-hidden-sm pure-hidden-md column-last pure-u-1"
+        style="position: absolute; right: 0em; bottom: 10.5em;text-align:right; color: white"
+      >
+        <div class="wrap">
+          <div>
+            <strong style="display: block;">Ben Labay</strong>
+            <small style="display: block;">Managing Director @ Speero</small>
+          </div>
+        </div>
+      </div>
+    </div>
+  </cxl-section>
+`;
+
+CXLSectionHeader.args = {
+  backgroundColor: '',
+  title: 'Join <strong>the top 1%</strong> of digital marketing.',
+  subtitle: 'We find the best practitioners in the world, and get them to teach their craft.',
+  description: 'Get access to 100+ digital marketing courses with your CXL subscription.',
+  image: 'https://cxl.com/institute/wp-content/uploads/2020/07/ben-labay_team_headshot-1x1-bw-min-1024x1024.png',
+  ctaLabel: 'Sign up now',
+  ctaUrl: '#',
+  showCta: true,
+
+};
+
+CXLSectionHeader.argTypes = {
+  backgroundColor: {
+    name: 'Class',
+    control: 'select',
+    options: [
+      'red',
+      'blue',
+      'light blue',
+      'green',
+      'black',
+    ],
+    mapping: {
+      red: 'wide-background-red',
+      blue: 'wide-background-blue',
+      "light blue": 'wide-background-light-blue',
+      green: 'wide-background-green',
+      black: 'wide-background-black'
+    }
+  },
+};