Model a: "Inherit everithing and rewrite necessary"

base.scss

@@ -105,3 +105,5 @@
 @import "./src/styles/scss/internal";
 // Should be last to make it easier to overwrite.
 @import "./src/stories/Library/colors/color-classes";
+
+@import "./src/stories/kids-universe/material-page";

src/stories/Blocks/material-page/MaterialPage.stories.tsx

@@ -29,6 +29,9 @@ export default {
     description: {
       control: { type: "text" },
     },
+    kidsUniverse: {
+      control: { type: "boolean" },
+    },
   },
 } as ComponentMeta<typeof MaterialPage>;
 

src/stories/Blocks/material-page/MaterialPage.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import Disclosure from "../../Library/disclosure/Disclosure";
 import { generateId } from "../../Library/horizontal-term-line/HorizontalTermLine";
 import ListDescription, {
@@ -15,6 +16,7 @@ export interface MaterialPageProps {
   periodical?: boolean;
   ctaText?: string;
   description?: string;
+  kidsUniverse?: boolean;
 }
 
 const MaterialPage: React.FC<MaterialPageProps> = ({
@@ -23,10 +25,15 @@ const MaterialPage: React.FC<MaterialPageProps> = ({
   periodical,
   ctaText,
   description,
+  kidsUniverse,
 }) => {
   const amountOfRenders = [1, 2];
+  const className = clsx("material-page", {
+    "material-page--kids-universe": kidsUniverse,
+  });
+
   return (
-    <div className="material-page">
+    <div className={className}>
       <MaterialHeader
         title={title}
         author={author}

src/stories/kids-universe/material-page.scss

@@ -0,0 +1,35 @@
+.material-page {
+  &--kids-universe {
+    background-color: #b5b4cc;
+
+    .material-header {
+      border-bottom: unset;
+      min-height: unset;
+
+      &__cover {
+        place-content: start center;
+        grid-row: 1/2;
+        grid-column: 1/2;
+      }
+
+      &__content {
+        grid-row: 1/2;
+        grid-column: 2/2;
+        padding: unset;
+      }
+      &__availability-label {
+        display: none;
+      }
+    }
+
+    .button-favourite {
+      display: none;
+    }
+
+    .material-description {
+      @include breakpoint-m {
+        padding-left: $s-6xl;
+      }
+    }
+  }
+}