Subheader content page

components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js

@@ -0,0 +1,16 @@
+import SubheaderContentPage from './SubheaderContentPage.twig';
+
+export default {
+  title: 'Design System/Layout/Subheader/Content Page'
+};
+
+export const base = {
+  render: (args) => SubheaderContentPage(args),
+  args: {
+    title: 'Ici le titre de l’article',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+    img: { alt: 'image 1', src: '/images/placeholder2.webp' }
+  },
+  argTypes: {}
+};

components/Layout/Subheader/ContentPage/SubheaderContentPage.twig

@@ -0,0 +1,11 @@
+<div class='Subheader Subheader--contentPage'>
+  <div class='Subheader-image'>
+    <img src='{{ img.src }}' alt='{{ img.alt }}' />
+  </div>
+  <div class='container mx-auto flex flex-col grow justify-center'>
+    <h1 class='Subheader-title'>{{ title }}</h1>
+    <div class='Subheader-description'>
+      {{ description }}
+    </div>
+  </div>
+</div>

components/Layout/Subheader/subheader.css

@@ -44,6 +44,55 @@
       min-height: rem-convert(284px);
     }
   }
+  &--contentPage {
+    flex-direction: column;
+    min-height: rem-convert(664px);
+
+    .container {
+      padding: rem-convert(24px);
+
+      @screen sm {
+        padding: rem-convert(24px) 0;
+      }
+    }
+
+    @screen md {
+      flex-direction: row-reverse;
+      min-height: rem-convert(350px);
+      align-items: stretch;
+      .container {
+        padding: rem-convert(24px 48px);
+      }
+    }
+  }
+
+  &-image {
+    width: 100%;
+    max-height: 390px;
+    overflow: hidden;
+    img {
+      width: 100%;
+    }
+    @screen md {
+      flex-shrink: 0;
+      max-width: 264px;
+      height: auto;
+      display: flex;
+      justify-content: end;
+      img {
+        width: initial;
+        max-width: initial;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    @screen lg {
+      max-width: 360px;
+    }
+    @screen xl {
+      max-width: 664px;
+    }
+  }
   &-centered {
     text-align: center;
     @screen lg {