diff --git a/src/implementations/twig/components/banner/README.md b/src/implementations/twig/components/banner/README.md
index cc228969be9..c3f3f37e35c 100644
--- a/src/implementations/twig/components/banner/README.md
+++ b/src/implementations/twig/components/banner/README.md
@@ -8,7 +8,8 @@ npm install --save @ecl/twig-component-banner
 
 ### Parameters
 
-- **"variant"** (string) (default: 'primary') Variant of banner (can be 'primary', 'image','image-shade','image-gradient')
+- **"variant"** (string) (default: 'plain-background') Variant of banner
+  (can be 'plain-background', 'text-box', 'text-highlight', 'image-overlay')
 - **"size"** (string) (default: 'm') Size of the banner (can be 's', 'm', 'l')
 - **"title"** (string) (default: '') Title of banner
 - **"image"** (string) (default: '') Image for banner (required for image banner type)
diff --git a/src/implementations/twig/components/banner/__snapshots__/banner.test.js.snap b/src/implementations/twig/components/banner/__snapshots__/banner.test.js.snap
index 206a0691818..82d4e880660 100644
--- a/src/implementations/twig/components/banner/__snapshots__/banner.test.js.snap
+++ b/src/implementations/twig/components/banner/__snapshots__/banner.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Banner Primary renders correctly 1`] = `
+exports[`Banner Plain background renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--primary ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--plain-background ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-container"
@@ -63,10 +63,10 @@ exports[`Banner Primary renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Banner Primary renders correctly with extra attributes 1`] = `
+exports[`Banner Plain background renders correctly with extra attributes 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--primary ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--plain-background ecl-banner--m ecl-banner--centered"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
   >
@@ -128,10 +128,10 @@ exports[`Banner Primary renders correctly with extra attributes 1`] = `
 </jest>
 `;
 
-exports[`Banner Primary renders correctly with extra class names 1`] = `
+exports[`Banner Plain background renders correctly with extra class names 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--primary ecl-banner--m ecl-banner--centered custom-class custom-class--test"
+    class="ecl-banner ecl-banner--plain-background ecl-banner--m ecl-banner--centered custom-class custom-class--test"
   >
     <div
       class="ecl-container"
@@ -191,10 +191,10 @@ exports[`Banner Primary renders correctly with extra class names 1`] = `
 </jest>
 `;
 
-exports[`Banner image - gradient renders correctly 1`] = `
+exports[`Banner image - image overlay renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image-gradient ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--image-overlay ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-banner__image"
@@ -263,10 +263,10 @@ exports[`Banner image - gradient renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Banner image - shade renders correctly 1`] = `
+exports[`Banner image - text highlight renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image-shade ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--text-highlight ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-banner__image"
@@ -338,7 +338,7 @@ exports[`Banner image - shade renders correctly 1`] = `
 exports[`Banner image - text-box renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-banner__image"
@@ -410,7 +410,7 @@ exports[`Banner image - text-box renders correctly 1`] = `
 exports[`Banner image renders correctly with extra attributes 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--centered"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
   >
@@ -484,7 +484,7 @@ exports[`Banner image renders correctly with extra attributes 1`] = `
 exports[`Banner image renders correctly with extra class names 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image ecl-banner--m ecl-banner--centered custom-class custom-class--test"
+    class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--centered custom-class custom-class--test"
   >
     <div
       class="ecl-banner__image"
diff --git a/src/implementations/twig/components/banner/banner.html.twig b/src/implementations/twig/components/banner/banner.html.twig
index 2887db126c1..7c3d16a9c25 100644
--- a/src/implementations/twig/components/banner/banner.html.twig
+++ b/src/implementations/twig/components/banner/banner.html.twig
@@ -2,7 +2,8 @@
 
 {#
   Parameters:
-  - "variant" (string) (default: 'primary') Variant of banner (can be 'primary', 'image', 'image-shade', 'image-gradient')
+  - "variant" (string) (default: 'primary') Variant of banner
+    (can be 'plain-background', 'text-block', 'text-highlight', 'image-overlay')
   - "size" (string) (default: 'm') Size of the banner (can be 's', 'm', 'l')
   - "title" (string) (default: '') Title of banner
   - "image" (string) (default: '') Image for banner (required for image banner variant)
@@ -21,7 +22,7 @@
 
 {% set _css_class = 'ecl-banner' %}
 {% set _extra_attributes = '' %}
-{% set _variant = variant|default('primary') %}
+{% set _variant = variant|default('plain-background') %}
 {% set _size = size|default('m') %}
 {% set _centered = centered ?? true %}
 {% set _full_width = full_width|default(false) %}
@@ -66,10 +67,10 @@
 {# Print the result #}
 
 <section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
-{% if _image is not empty and _variant in ['image', 'image-shade', 'image-gradient'] %}
+{% if _image is not empty and _variant != 'plain-background'  %}
   <div class="ecl-banner__image" style="background-image:url({{ _image }})"></div>
 {% endif %}
-{% if _credit is not empty and _variant in ['image', 'image-shade', 'image-gradient'] %}
+{% if _credit is not empty and _variant != 'plain-background' %}
   <div class="ecl-banner__credit">{{ _credit }}</div>
 {% endif %}
   <div class="ecl-container">
diff --git a/src/implementations/twig/components/banner/banner.story.js b/src/implementations/twig/components/banner/banner.story.js
index aedcd3b80ff..d98ccf3218c 100644
--- a/src/implementations/twig/components/banner/banner.story.js
+++ b/src/implementations/twig/components/banner/banner.story.js
@@ -3,14 +3,14 @@ import withCode from '@ecl/storybook-addon-code';
 import { correctPaths } from '@ecl/story-utils';
 
 // Import data for demos
-import bannerDataPrimary from '@ecl/specs-component-banner/demo/data--primary';
-import bannerDataImage from '@ecl/specs-component-banner/demo/data--image-box';
-import bannerDataImageShade from '@ecl/specs-component-banner/demo/data--image-shade';
-import bannerDataImageGradient from '@ecl/specs-component-banner/demo/data--image-gradient';
+import bannerDataPlainBackground from '@ecl/specs-component-banner/demo/data--plain-background';
+import bannerDataTextBox from '@ecl/specs-component-banner/demo/data--text-box';
+import bannerDataImageOverlay from '@ecl/specs-component-banner/demo/data--image-overlay';
+import bannerDataTextHighlight from '@ecl/specs-component-banner/demo/data--text-highlight';
 import banner from './banner.html.twig';
 import notes from './README.md';
 
-const cta = { ...bannerDataPrimary.link };
+const cta = { ...bannerDataPlainBackground.link };
 const getArgs = (data) => {
   const args = {
     show_title: true,
@@ -230,37 +230,38 @@ export default {
   parameters: { layout: 'fullscreen' },
 };
 
-export const Primary = (args) => renderStory(bannerDataPrimary, args);
+export const PlainBackground = (args) =>
+  renderStory(bannerDataPlainBackground, args);
 
-Primary.storyName = 'primary';
-Primary.args = getArgs(bannerDataPrimary);
-Primary.argTypes = getArgTypes(bannerDataPrimary);
-Primary.parameters = {
-  notes: { markdown: notes, json: bannerDataPrimary },
+PlainBackground.storyName = 'plain background';
+PlainBackground.args = getArgs(bannerDataPlainBackground);
+PlainBackground.argTypes = getArgTypes(bannerDataPlainBackground);
+PlainBackground.parameters = {
+  notes: { markdown: notes, json: bannerDataPlainBackground },
 };
 
-export const Image = (args) => renderStory(bannerDataImage, args);
+export const TextBox = (args) => renderStory(bannerDataTextBox, args);
 
-Image.storyName = 'image - text-block';
-Image.args = getArgs(bannerDataImage);
-Image.argTypes = getArgTypes(bannerDataImage);
-Image.parameters = { notes: { markdown: notes, json: bannerDataImage } };
+TextBox.storyName = 'text box';
+TextBox.args = getArgs(bannerDataTextBox);
+TextBox.argTypes = getArgTypes(bannerDataTextBox);
+TextBox.parameters = { notes: { markdown: notes, json: bannerDataTextBox } };
 
-export const ImageGradient = (args) =>
-  renderStory(bannerDataImageGradient, args);
+export const TextHighlight = (args) =>
+  renderStory(bannerDataTextHighlight, args);
 
-ImageGradient.storyName = 'image - gradient';
-ImageGradient.args = getArgs(bannerDataImageGradient);
-ImageGradient.argTypes = getArgTypes(bannerDataImageGradient);
-ImageGradient.parameters = {
-  notes: { markdown: notes, json: bannerDataImageGradient },
+TextHighlight.storyName = 'text highlight';
+TextHighlight.args = getArgs(bannerDataTextHighlight);
+TextHighlight.argTypes = getArgTypes(bannerDataTextHighlight);
+TextHighlight.parameters = {
+  notes: { markdown: notes, json: bannerDataTextHighlight },
 };
 
-export const ImageShade = (args) => renderStory(bannerDataImageShade, args);
+export const ImageOverlay = (args) => renderStory(bannerDataImageOverlay, args);
 
-ImageShade.storyName = 'image - shade';
-ImageShade.args = getArgs(bannerDataImageShade);
-ImageShade.argTypes = getArgTypes(bannerDataImageShade);
-ImageShade.parameters = {
-  notes: { markdown: notes, json: bannerDataImageShade },
+ImageOverlay.storyName = 'image overlay';
+ImageOverlay.args = getArgs(bannerDataImageOverlay);
+ImageOverlay.argTypes = getArgTypes(bannerDataImageOverlay);
+ImageOverlay.parameters = {
+  notes: { markdown: notes, json: bannerDataImageOverlay },
 };
diff --git a/src/implementations/twig/components/banner/banner.test.js b/src/implementations/twig/components/banner/banner.test.js
index 6f3c4fed5f5..e694b225ad5 100644
--- a/src/implementations/twig/components/banner/banner.test.js
+++ b/src/implementations/twig/components/banner/banner.test.js
@@ -5,10 +5,10 @@ import {
 } from '@ecl/test-utils';
 import { axe, toHaveNoViolations } from 'jest-axe';
 
-import bannerDataPrimary from '@ecl/specs-component-banner/demo/data--primary';
-import bannerDataImage from '@ecl/specs-component-banner/demo/data--image-box';
-import bannerDataImageShade from '@ecl/specs-component-banner/demo/data--image-shade';
-import bannerDataImageGradient from '@ecl/specs-component-banner/demo/data--image-gradient';
+import bannerDataPlainBackground from '@ecl/specs-component-banner/demo/data--plain-background';
+import bannerDataTextBox from '@ecl/specs-component-banner/demo/data--text-box';
+import bannerDataImageOverlay from '@ecl/specs-component-banner/demo/data--image-overlay';
+import bannerDataTextHighlight from '@ecl/specs-component-banner/demo/data--text-highlight';
 
 expect.extend(toHaveNoViolations);
 
@@ -16,8 +16,8 @@ describe('Banner', () => {
   const template = '@ecl/banner/banner.html.twig';
   const render = (params) => renderTwigFileAsNode(template, params);
 
-  describe('Primary', () => {
-    const data = bannerDataPrimary;
+  describe('Plain background', () => {
+    const data = bannerDataPlainBackground;
 
     test(`renders correctly`, () => {
       expect.assertions(1);
@@ -59,25 +59,25 @@ describe('Banner', () => {
     test(`- text-box renders correctly`, () => {
       expect.assertions(1);
 
-      return expect(render(bannerDataImage)).resolves.toMatchSnapshot();
+      return expect(render(bannerDataTextBox)).resolves.toMatchSnapshot();
     });
 
-    test(`- gradient renders correctly`, () => {
+    test(`- text highlight renders correctly`, () => {
       expect.assertions(1);
 
-      return expect(render(bannerDataImageGradient)).resolves.toMatchSnapshot();
+      return expect(render(bannerDataTextHighlight)).resolves.toMatchSnapshot();
     });
 
-    test(`- shade renders correctly`, () => {
+    test(`- image overlay renders correctly`, () => {
       expect.assertions(1);
 
-      return expect(render(bannerDataImageShade)).resolves.toMatchSnapshot();
+      return expect(render(bannerDataImageOverlay)).resolves.toMatchSnapshot();
     });
 
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
-      const withExtraClasses = merge(bannerDataImage, {
+      const withExtraClasses = merge(bannerDataTextBox, {
         extra_classes: 'custom-class custom-class--test',
       });
 
@@ -87,7 +87,7 @@ describe('Banner', () => {
     test('renders correctly with extra attributes', () => {
       expect.assertions(1);
 
-      const withExtraAttributes = merge(bannerDataImage, {
+      const withExtraAttributes = merge(bannerDataTextBox, {
         extra_attributes: [
           { name: 'data-test', value: 'data-test-value' },
           { name: 'data-test-1', value: 'data-test-value-1' },
@@ -99,7 +99,7 @@ describe('Banner', () => {
 
     test(`passes the accessibility tests`, async () => {
       expect(
-        await axe(renderTwigFileAsHtml(template, bannerDataImage, true))
+        await axe(renderTwigFileAsHtml(template, bannerDataTextBox, true))
       ).toHaveNoViolations();
     });
   });
diff --git a/src/implementations/twig/components/carousel/README.md b/src/implementations/twig/components/carousel/README.md
index 17b1f38145d..b7e7f0284dc 100644
--- a/src/implementations/twig/components/carousel/README.md
+++ b/src/implementations/twig/components/carousel/README.md
@@ -8,7 +8,7 @@ npm install --save @ecl/twig-component-carousel
 
 ### Parameters
 
-- **"items"** (array) (default: []): List of page-banner compatible with EC page-banner component structure
+- **"items"** (array) (default: []): List of page-banner compatible with EC banner component structure
 - **"counter_label"** (string) (default: 'of')
 - **"sr_previous"** (string) (default: 'Previous slides') screen reader label for previous button
 - **"sr_next"** (string) (default: 'Next slides') screen reader label for next button
diff --git a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
index e0d5655a112..b934292cc7d 100644
--- a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
+++ b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
@@ -19,7 +19,7 @@ exports[`Carousel Default renders correctly 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image ecl-banner--m"
+            class="ecl-banner ecl-banner--text-box ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -92,7 +92,7 @@ exports[`Carousel Default renders correctly 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-gradient ecl-banner--m"
+            class="ecl-banner ecl-banner--text-highlight ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -165,7 +165,7 @@ exports[`Carousel Default renders correctly 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-shade ecl-banner--m"
+            class="ecl-banner ecl-banner--image-overlay ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -407,7 +407,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image ecl-banner--m"
+            class="ecl-banner ecl-banner--text-box ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -480,7 +480,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-gradient ecl-banner--m"
+            class="ecl-banner ecl-banner--text-highlight ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -553,7 +553,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-shade ecl-banner--m"
+            class="ecl-banner ecl-banner--image-overlay ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -793,7 +793,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image ecl-banner--m"
+            class="ecl-banner ecl-banner--text-box ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -866,7 +866,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-gradient ecl-banner--m"
+            class="ecl-banner ecl-banner--text-highlight ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -939,7 +939,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-shade ecl-banner--m"
+            class="ecl-banner ecl-banner--image-overlay ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
diff --git a/src/implementations/vanilla/components/banner/_banner.scss b/src/implementations/vanilla/components/banner/_banner.scss
index 9fb2dd22131..fbcf13680a2 100644
--- a/src/implementations/vanilla/components/banner/_banner.scss
+++ b/src/implementations/vanilla/components/banner/_banner.scss
@@ -164,10 +164,10 @@ $_font-weight: null !default;
 }
 
 /*
-  * variant: primary
+  * variant: plain background
   */
-.ecl-banner--primary {
-  background: map.get($_background, 'primary');
+.ecl-banner--plain-background {
+  background: map.get($_background, 'plain-background');
 
   .ecl-banner__title {
     color: map.get($_text-color, 'inverted');
@@ -179,10 +179,10 @@ $_font-weight: null !default;
 }
 
 /*
-  * variant: image box
+  * variant: text box
   */
-.ecl-banner--image {
-  background: map.get($_background, 'image-box');
+.ecl-banner--text-box {
+  background: map.get($_background, 'white');
 
   .ecl-banner__image {
     border-bottom: 4px solid $_border-color;
@@ -207,7 +207,7 @@ $_font-weight: null !default;
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('l') {
-  .ecl-banner--image {
+  .ecl-banner--text-box {
     .ecl-banner__container {
       padding-bottom: 0;
       padding-top: 0;
@@ -227,7 +227,7 @@ $_font-weight: null !default;
     }
 
     .ecl-banner__content {
-      background: map.get($_background, 'image-box');
+      background: map.get($_background, 'text-box');
       border-bottom: map.get($_border-width, 'bottom') solid $_border-color;
       border-inline-start: map.get($_border-width, 'left') solid $_border-color;
       border-radius: map.get($_border-radius, 'content');
@@ -237,10 +237,10 @@ $_font-weight: null !default;
 }
 
 /*
-  * variant: image-shade
+  * variant: image-overlay
   */
-.ecl-banner--image-shade {
-  background: map.get($_background, 'image-shade');
+.ecl-banner--image-overlay {
+  background: map.get($_background, 'image-overlay');
 
   .ecl-banner__image {
     border-bottom: 4px solid $_border-color;
@@ -248,7 +248,7 @@ $_font-weight: null !default;
 
   // manage ratio 4:1
   .ecl-banner__image::before {
-    background-color: map.get($_overlay, 'image-shade');
+    background-color: map.get($_overlay, 'image-overlay');
     border-radius: map.get($_border-radius, 'banner')
       map.get($_border-radius, 'banner') 0 0;
     content: '';
@@ -268,7 +268,7 @@ $_font-weight: null !default;
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('l') {
-  .ecl-banner--image-shade {
+  .ecl-banner--image-overlay {
     .ecl-banner__image {
       border-bottom-width: 0;
       height: 100%;
@@ -291,10 +291,10 @@ $_font-weight: null !default;
 }
 
 /*
-  * variant: image-gradient
+  * variant: text-highlight
   */
-.ecl-banner--image-gradient {
-  background: map.get($_background, 'image-gradient');
+.ecl-banner--text-highlight {
+  background: map.get($_background, 'text-highlight');
 
   .ecl-banner__image {
     border-bottom: 4px solid $_border-color;
@@ -321,7 +321,7 @@ $_font-weight: null !default;
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('l') {
-  .ecl-banner--image-gradient {
+  .ecl-banner--text-highlight {
     .ecl-banner__image {
       border-bottom-width: 0;
       height: 100%;
diff --git a/src/implementations/vanilla/components/banner/banner-ec.scss b/src/implementations/vanilla/components/banner/banner-ec.scss
index eb03fa7989e..48436e5d14f 100644
--- a/src/implementations/vanilla/components/banner/banner-ec.scss
+++ b/src/implementations/vanilla/components/banner/banner-ec.scss
@@ -11,13 +11,13 @@
     'bottom': 4px,
   ),
   $_background: (
-    'primary': map.get(theme.$color, 'blue-100'),
-    'image-box': map.get(theme.$color, 'white-100'),
-    'image-shade': map.get(theme.$color, 'blue-120'),
-    'image-gradient': map.get(theme.$color, 'blue-120'),
+    'plain-background': map.get(theme.$color, 'blue-100'),
+    'text-box': map.get(theme.$color, 'white-100'),
+    'image-overlay': map.get(theme.$color, 'blue-120'),
+    'text-highlight': map.get(theme.$color, 'blue-120'),
   ),
   $_overlay: (
-    'image-shade': rgba(0, 0, 0, 0.4),
+    'image-overlay': rgba(0, 0, 0, 0.4),
   ),
   $_text-color: (
     'dark': map.get(theme.$color, 'grey-100'),
diff --git a/src/implementations/vanilla/components/banner/banner-eu.scss b/src/implementations/vanilla/components/banner/banner-eu.scss
index 234102b9627..e1a7fa31b2e 100644
--- a/src/implementations/vanilla/components/banner/banner-eu.scss
+++ b/src/implementations/vanilla/components/banner/banner-eu.scss
@@ -11,20 +11,20 @@
     'bottom': 0,
   ),
   $_background: (
-    'primary':
+    'plain-background':
       linear-gradient(
         to right,
         map.get(theme.$color, 'blue-140') 0%,
         map.get(theme.$color, 'blue-100') 100%
       ),
-    'image-box': rgba(255, 255, 255, 0.9),
-    'image-shade':
+    'text-box': rgba(255, 255, 255, 0.9),
+    'image-overlay':
       linear-gradient(
         to right,
         map.get(theme.$color, 'blue-140') 0%,
         map.get(theme.$color, 'blue-100') 100%
       ),
-    'image-gradient':
+    'text-highlight':
       linear-gradient(
         to right,
         map.get(theme.$color, 'blue-140') 0%,
@@ -32,7 +32,7 @@
       ),
   ),
   $_overlay: (
-    'image-shade': rgba(0, 0, 0, 0.4),
+    'image-overlay': rgba(0, 0, 0, 0.4),
   ),
   $_text-color: (
     'dark': map.get(theme.$color, 'grey-140'),
diff --git a/src/specs/components/banner/demo/data--image-shade.js b/src/specs/components/banner/demo/data--image-overlay.js
similarity index 96%
rename from src/specs/components/banner/demo/data--image-shade.js
rename to src/specs/components/banner/demo/data--image-overlay.js
index 6e60f6d5544..5e323c0821b 100644
--- a/src/specs/components/banner/demo/data--image-shade.js
+++ b/src/specs/components/banner/demo/data--image-overlay.js
@@ -21,6 +21,6 @@ module.exports = {
   },
   image: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
   credit: '© Copyright or credit',
-  variant: 'image-shade',
+  variant: 'image-overlay',
   centered: true,
 };
diff --git a/src/specs/components/banner/demo/data--primary.js b/src/specs/components/banner/demo/data--plain-background.js
similarity index 95%
rename from src/specs/components/banner/demo/data--primary.js
rename to src/specs/components/banner/demo/data--plain-background.js
index ed80872fcd9..d1ed8d57eaf 100644
--- a/src/specs/components/banner/demo/data--primary.js
+++ b/src/specs/components/banner/demo/data--plain-background.js
@@ -19,6 +19,6 @@ module.exports = {
       transform: 'rotate-90',
     },
   },
-  variant: 'primary',
+  variant: 'plain-background',
   centered: true,
 };
diff --git a/src/specs/components/banner/demo/data--image-box.js b/src/specs/components/banner/demo/data--text-box.js
similarity index 96%
rename from src/specs/components/banner/demo/data--image-box.js
rename to src/specs/components/banner/demo/data--text-box.js
index 2074b702f1c..438382a212d 100644
--- a/src/specs/components/banner/demo/data--image-box.js
+++ b/src/specs/components/banner/demo/data--text-box.js
@@ -21,6 +21,6 @@ module.exports = {
   },
   image: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
   credit: '© Copyright or credit',
-  variant: 'image',
+  variant: 'text-box',
   centered: true,
 };
diff --git a/src/specs/components/banner/demo/data--image-gradient.js b/src/specs/components/banner/demo/data--text-highlight.js
similarity index 96%
rename from src/specs/components/banner/demo/data--image-gradient.js
rename to src/specs/components/banner/demo/data--text-highlight.js
index c5b5e7c8018..a0f1b4121fe 100644
--- a/src/specs/components/banner/demo/data--image-gradient.js
+++ b/src/specs/components/banner/demo/data--text-highlight.js
@@ -21,6 +21,6 @@ module.exports = {
   },
   image: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
   credit: '© Copyright or credit',
-  variant: 'image-gradient',
+  variant: 'text-highlight',
   centered: true,
 };
diff --git a/src/specs/components/carousel/demo/data.js b/src/specs/components/carousel/demo/data.js
index 38674e19acd..2d5e3c45e0f 100644
--- a/src/specs/components/carousel/demo/data.js
+++ b/src/specs/components/carousel/demo/data.js
@@ -24,7 +24,7 @@ module.exports = {
       image:
         'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
       credit: '© Copyright or credit',
-      variant: 'image',
+      variant: 'text-box',
       centered: false,
     },
     {
@@ -48,7 +48,7 @@ module.exports = {
       image:
         'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
       credit: '© Copyright or credit',
-      variant: 'image-gradient',
+      variant: 'text-highlight',
       centered: false,
     },
     {
@@ -72,7 +72,7 @@ module.exports = {
       image:
         'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
       credit: '© Copyright or credit',
-      variant: 'image-shade',
+      variant: 'image-overlay',
       centered: false,
     },
   ],
diff --git a/src/website/src/pages/ec/components/banner/demo/index.js b/src/website/src/pages/ec/components/banner/demo/index.js
index 9e2dc828222..93ba841dfc7 100644
--- a/src/website/src/pages/ec/components/banner/demo/index.js
+++ b/src/website/src/pages/ec/components/banner/demo/index.js
@@ -1,14 +1,20 @@
-import demoContentImageBox from '@ecl/specs-component-banner/demo/data--image-box';
-import demoContentImageShade from '@ecl/specs-component-banner/demo/data--image-shade';
-import demoContentImageGradient from '@ecl/specs-component-banner/demo/data--image-gradient';
-import demoContentPrimary from '@ecl/specs-component-banner/demo/data--primary';
+import demoContentTextBox from '@ecl/specs-component-banner/demo/data--text-box';
+import demoContentImageOverlay from '@ecl/specs-component-banner/demo/data--image-overlay';
+import demoContentTextHighlight from '@ecl/specs-component-banner/demo/data--text-highlight';
+import demoContentPlainBackground from '@ecl/specs-component-banner/demo/data--plain-background';
 
 import template from '@ecl/twig-component-banner/banner.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
-export const bannerImageBox = template(correctSvgPath(demoContentImageBox));
-export const bannerImageShade = template(correctSvgPath(demoContentImageShade));
-export const bannerImageGradient = template(
-  correctSvgPath(demoContentImageGradient)
+export const bannerTextBox = template(
+  correctSvgPath(correctSvgPath(demoContentTextBox))
+);
+export const bannerImageOverlay = template(
+  correctSvgPath(demoContentImageOverlay)
+);
+export const bannerTextHighlight = template(
+  correctSvgPath(demoContentTextHighlight)
+);
+export const bannerPlainBackground = template(
+  correctSvgPath(demoContentPlainBackground)
 );
-export const bannerPrimary = template(correctSvgPath(demoContentPrimary));
diff --git a/src/website/src/pages/ec/components/banner/docs/code.mdx b/src/website/src/pages/ec/components/banner/docs/code.mdx
index bc931f0faeb..422ade971ca 100644
--- a/src/website/src/pages/ec/components/banner/docs/code.mdx
+++ b/src/website/src/pages/ec/components/banner/docs/code.mdx
@@ -5,48 +5,52 @@ order: 2
 
 import { Html, Playground } from '@ecl/website-components';
 import {
-  bannerImageBox,
-  bannerImageShade,
-  bannerImageGradient,
-  bannerPrimary,
+  bannerTextBox,
+  bannerImageOverlay,
+  bannerTextHighlight,
+  bannerPlainBackground,
 } from '../demo';
 
 ## Image banners
 
-### Text box image banner
+### Text box banner
 
-<Playground system="ec" selectedKind="components-banner" selectedStory="image">
-  <Html markup={bannerImageBox} />
+<Playground
+  system="ec"
+  selectedKind="components-banner"
+  selectedStory="text-box"
+>
+  <Html markup={bannerTextBox} />
 </Playground>
 
-### Shaded image banner
+### Image overlay banner
 
 <Playground
   system="ec"
   selectedKind="components-banner"
-  selectedStory="image-shade"
+  selectedStory="image-overlay"
 >
-  <Html markup={bannerImageShade} />
+  <Html markup={bannerImageOverlay} />
 </Playground>
 
-### Gradient image banner
+### Text highlight banner
 
 <Playground
   system="ec"
   selectedKind="components-banner"
-  selectedStory="image-gradient"
+  selectedStory="text-highlight"
 >
-  <Html markup={bannerImageGradient} />
+  <Html markup={bannerTextHighlight} />
 </Playground>
 
-## Primary banner
+## Plain background banner
 
 <Playground
   system="ec"
   selectedKind="components-banner"
-  selectedStory="primary"
+  selectedStory="plain-background"
 >
-  <Html markup={bannerPrimary} />
+  <Html markup={bannerPlainBackground} />
 </Playground>
 
 ## Other variants
diff --git a/src/website/src/pages/eu/components/banner/demo/index.js b/src/website/src/pages/eu/components/banner/demo/index.js
index 09056599cef..93ba841dfc7 100644
--- a/src/website/src/pages/eu/components/banner/demo/index.js
+++ b/src/website/src/pages/eu/components/banner/demo/index.js
@@ -1,16 +1,20 @@
-import demoContentImageBox from '@ecl/specs-component-banner/demo/data--image-box';
-import demoContentImageShade from '@ecl/specs-component-banner/demo/data--image-shade';
-import demoContentImageGradient from '@ecl/specs-component-banner/demo/data--image-gradient';
-import demoContentPrimary from '@ecl/specs-component-banner/demo/data--primary';
+import demoContentTextBox from '@ecl/specs-component-banner/demo/data--text-box';
+import demoContentImageOverlay from '@ecl/specs-component-banner/demo/data--image-overlay';
+import demoContentTextHighlight from '@ecl/specs-component-banner/demo/data--text-highlight';
+import demoContentPlainBackground from '@ecl/specs-component-banner/demo/data--plain-background';
 
 import template from '@ecl/twig-component-banner/banner.html.twig';
 import { correctSvgPath } from '@ecl/website-utils';
 
-export const bannerImageBox = template(
-  correctSvgPath(correctSvgPath(demoContentImageBox))
+export const bannerTextBox = template(
+  correctSvgPath(correctSvgPath(demoContentTextBox))
 );
-export const bannerImageShade = template(correctSvgPath(demoContentImageShade));
-export const bannerImageGradient = template(
-  correctSvgPath(demoContentImageGradient)
+export const bannerImageOverlay = template(
+  correctSvgPath(demoContentImageOverlay)
+);
+export const bannerTextHighlight = template(
+  correctSvgPath(demoContentTextHighlight)
+);
+export const bannerPlainBackground = template(
+  correctSvgPath(demoContentPlainBackground)
 );
-export const bannerPrimary = template(correctSvgPath(demoContentPrimary));
diff --git a/src/website/src/pages/eu/components/banner/docs/code.mdx b/src/website/src/pages/eu/components/banner/docs/code.mdx
index b43ce859e82..bb5f513c5d1 100644
--- a/src/website/src/pages/eu/components/banner/docs/code.mdx
+++ b/src/website/src/pages/eu/components/banner/docs/code.mdx
@@ -5,56 +5,56 @@ order: 2
 
 import { Html, Playground } from '@ecl/website-components';
 import {
-  bannerImageBox,
-  bannerImageShade,
-  bannerImageGradient,
-  bannerPrimary,
+  bannerTextBox,
+  bannerImageOverlay,
+  bannerTextHighlight,
+  bannerPlainBackground,
 } from '../demo';
 
 ## Image banners
 
-### Text box image banner
+### Text box banner
 
 <Playground
   system="eu"
   selectedKind="components-banner"
-  selectedStory="image"
+  selectedStory="text-box"
   showFrame
 >
-  <Html markup={bannerImageBox} />
+  <Html markup={bannerTextBox} />
 </Playground>
 
-### Shaded image banner
+### Image overlay banner
 
 <Playground
   system="eu"
   selectedKind="components-banner"
-  selectedStory="image-shade"
+  selectedStory="image-overlay"
   showFrame
 >
-  <Html markup={bannerImageShade} />
+  <Html markup={bannerImageOverlay} />
 </Playground>
 
-### Gradient image banner
+### Text highlight banner
 
 <Playground
   system="eu"
   selectedKind="components-banner"
-  selectedStory="image-gradient"
+  selectedStory="text-highlight"
   showFrame
 >
-  <Html markup={bannerImageGradient} />
+  <Html markup={bannerTextHighlight} />
 </Playground>
 
-## Primary banner
+## Plain background banner
 
 <Playground
   system="eu"
   selectedKind="components-banner"
-  selectedStory="primary"
+  selectedStory="plain-background"
   showFrame
 >
-  <Html markup={bannerPrimary} />
+  <Html markup={bannerPlainBackground} />
 </Playground>
 
 ## Other variants