text with headline

gfi-ihk-2024/stories/_global/styles/_mixins.scss

@@ -68,11 +68,14 @@
     font-size: 14px;
   }
 
-  + h1 {
+  + h1,
+  + .like-h1 {
     margin-top: 0.1em;
   }
 
-  + h2, + .like-h2, + h3, + h4 {
+  + h2, + .like-h2,
+  + h3, + .like-h3,
+  + h4 + .like-h4, {
     margin-top: 0.2em;
   }
 }

gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadline.stories.js

@@ -0,0 +1,13 @@
+import {createTextWithHeadline} from "./TextWithHeadlineComponent";
+
+export default {
+  title: 'Components/Text With Headline',
+  args: {},
+}
+
+const Template = ({...args}) => {
+  return createTextWithHeadline({...args});
+};
+
+export const TextWithHeadline = Template.bind({});
+TextWithHeadline.args = {};

gfi-ihk-2024/stories/components/text-with-headline/TextWithHeadlineComponent.js

@@ -0,0 +1,18 @@
+import './text-with-headline.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {lorem2} from "../../_global/scripts/lorem";
+
+export const createTextWithHeadline = ({
+  kicker = 'Dachzeile',
+  headline = 'Dies ist eine Zwischenheadline mit der Maximalbefüllung von 80 Zeichen.',
+}) => {
+  const section = createElement('section', ['text-with-headline']);
+  const container = createElement('div', ['container'], null, section);
+  const text = createElement('div', ['text'], null, container);
+  createElement('p', ['kicker'], kicker, text);
+  createElement('div', ['like-h1'], headline, text);
+  const richText = createElement('div', ['richtext'], null, text);
+  createElement('p', [], lorem2, richText);
+
+  return section;
+}

gfi-ihk-2024/stories/components/text-with-headline/text-with-headline.scss

@@ -0,0 +1,24 @@
+@import '../../_global/styles/vars';
+
+.text-with-headline {
+  margin-top: 0;
+  .text {
+    margin: 0;
+    max-width: 900px;
+  }
+  .richtext p {
+    margin-bottom: 30px;
+  }
+}
+
+* + .text-with-headline {
+  margin-top: var(--section-margin);
+}
+
+.container {
+  .text-with-headline {
+    .container {
+      padding: 0;
+    }
+  }
+}

gfi-ihk-2024/stories/pages/home/HomePage.js

@@ -12,6 +12,7 @@ import {createEventsSection} from "../../sections/events/EventsComponent";
 import {createSocialSection} from "../../sections/social/SocialComponent";
 import {createTeasersSection} from "../../sections/teasers/TeasersComponent";
 import {createSurvey} from "../../sections/survey/SurveyComponent";
+import {createTextWithHeadline} from "../../components/text-with-headline/TextWithHeadlineComponent";
 
 export const createHomePage = ({
   globalMessageType = 'light',
@@ -32,6 +33,7 @@ export const createHomePage = ({
   main.appendChild(createInfoBanner({imageSrc: null, isCommercial: false}));
   main.appendChild(createTopicTeasersSection({}));
   main.appendChild(createTeasersSection({headline: 'Aktuelles', type: 'hero', maxItems: 2}));
+  main.appendChild(createTextWithHeadline({}));
   main.appendChild(createSurvey({}));
   main.appendChild(createSlider({slides: sliderData}));
   main.appendChild(createEventsSection({}));