MiniTeaser Component

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

@@ -23,9 +23,9 @@
   max-width: 100%;
   margin: 0 auto;
 
-  &.medium {
+  /*&.medium {
     --container-width: 1100px;
-  }
+  }*/
 
   &.small {
     --container-width: 1000px;

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

@@ -9,6 +9,7 @@
   --theme-color-primary-dimmed-03: #CCD7E6;
   --theme-color-primary-dimmed-04: #E3EBF5;
 
+
   --theme-color-secondary: #56BD66;
   --theme-color-secondary-intensed: #2E8533;
   --theme-color-secondary-dimmed: #E4F1E4;

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js

@@ -4,14 +4,14 @@ export default {
   title: 'Components/Mini Teaser',
   parameters: {
     backgrounds: {
-      default: 'lightblue',
+      default: 'white',
     },
   },
   argTypes: {
     type: {
       name: 'Typ',
       control: {type: 'select'},
-      options: ['standard', 'infobanner'],
+      options: ['standard', 'infoteaser'],
       defaultValue: 'standard',
     },
     title: {
@@ -41,4 +41,4 @@ export const StandardMiniTeaser = MiniTeaser.bind({});
 StandardMiniTeaser.args = {};
 
 export const infobanner = MiniTeaser.bind({});
-infobanner.args = {type:'infobanner'};
+infobanner.args = {type:'infoteaser'};

gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js

@@ -3,19 +3,24 @@ import {createElement} from "../../_global/scripts/helpers";
 import { createButton } from '../../atoms/button/ButtonComponent';
 export const createMiniTeaser = ({
   type = 'standard',
-  title = 'Hallo Welt',
+  category = 'IHK Mitgliedschaft',
+  title = 'Werden Sie Teil unseres Netzwerks!',
   link = '#',
-  icon = 'Eule Doktorhut',
-  buttonlabel = 'mehr erfahren',
+  icon = 'Roboter',
+  buttonlabel = 'IHK-Newsletter sichern',
 }) => {
-  const tile = createElement('div', ['tile', 'topic-teaser', 'mini-teaser', type === 'infobanner' ? 'infob' :'standard', type], null);
+  const tile = createElement('div', ['tile',  'mini-teaser', type], null);
   tile.href = link;
-  createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, tile);
+  
   const textBox = createElement('div', ['text-box'], null, tile);
+  if (type === 'standard') {
+    createElement('h5', ['category'], category, textBox);
+  }else{
+    createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox);
+  }
   createElement('h4', ['title'], title, textBox);
-  if (type === 'infobanner') {
+  if (type === 'infoteaser') {
     textBox.appendChild(createButton({color: 'white', label: buttonlabel, iconPosition: 'icon-right', icon: null}))
   }
-
   return tile;
 }

gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss

@@ -1,113 +1,108 @@
 @import '../../_global/styles/mixins';
 @import '../../_global/styles/vars';
 
-.topic-teaser, .topics .tile {
-  --topic-tile-padding: 24px;
+.mini-teaser {
   position: relative;
-  display: flex;
-  flex-direction: column;
   background-color: white;
   overflow: hidden;
   width: 100%;
-  //max-width: 420px;
-  border-radius: var(--border-radius-lg);
-  padding: var(--topic-tile-padding);
+  max-width: 420px;
+  border-radius: 4px;
+  padding: 16px 12px;
   transition: 0.25s ease;
   line-height: 1.2;
   text-align: center;
   text-decoration: none;
-
-  @media(max-width: 999px) {
-    --topic-tile-padding: 14px;
-  }
-
-  @media(max-width: 767px) {
-    font-size: 16px;
-    min-height: 84px;
-    border-radius: 8px;
-  }
-
-  .icon-box {
-    font-family: 'Pictograms', sans-serif;
-    font-size: 72px;
-    line-height: 1;
-    color: var(--theme-color-secondary);
-    margin-top: 6px;
-
-    @media(max-width: 567px) {
-      font-size: 50px;
-      margin-top: 0;
-    }
+  background-color: var(--theme-grey-light);
+  .title{
+    font-size: 22px;
   }
-}
-
-.col {
-  .topic-teaser, .topics .tile {
-    max-width: none;
-  }
-}
-
-a.topic-teaser, .topics:not([data-type="list"]) a.tile {
-  @include focus-visible();
-
-  &:before {
+  &.standard::before {
     content: "";
     position: absolute;
     display: block;
-    bottom: 0;
+    top: 0;
     left: 0;
     right: 0;
     height: var(--border-width);
     background-color: var(--theme-color-secondary);
     transition: 0.2s ease;
   }
-
-  &:hover:before {
+  &.standard:hover::before {
     height: var(--border-width-hover);
   }
-
-  .title {
-    text-decoration: underline;
-    margin: 12px 0;
-
-    @media(max-width: 999px) {
-      margin: 8px 0;
+  h4{
+    font-size: 22px;
+  }
+  &.infoteaser{
+    background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%);
+    &:after{
+      content:"";
+      position:absolute;
+      left:0;
+      right:0;
+      top:0;
+      bottom:0;
+      z-index:-1;
+      background: linear-gradient(161deg, var(--theme-color-gradient-01) 40%, var(--theme-color-gradient-02) 80%, var(--theme-color-gradient-03) 120%);
     }
-    @media(max-width: 567px) {
-      margin: 4px 0;
+    .title, .category, .btn{
+      color:white;
+    }
+    .title{
+      margin-top: 0;
+      padding-left: 54px;
+      min-height: 48px;
+      text-align: left;
+      line-height: 24px;
+      margin-bottom: 19px;
+    }
+    .btn{
+      background-color: transparent;
+      border: 1px solid white;
+      margin-left: 54px;
+      display: inline-block;
+      padding:8px 10px;
+      line-height: 22px;
+      border-radius:16px;
+      --button-padding: 8px 10px;
+      min-height: 0;
+      font-size: 22px;
+    }
+    .icon-box{
+      margin-bottom: 19px;
+      margin-top: 0;
+      padding-top: 0;
+      position: absolute;
+      top: 16px;
+      left: 12px;
+    }
+    .text-box{
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
     }
   }
 
-  .text-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-  }
-}
-
-div.topic-teaser, .topics[data-type="list"] .tile {
-  padding: 0 var(--topic-tile-padding) 0.5em;
-
   .icon-box {
-    background-color: var(--theme-color-primary);
-    color: var(--theme-color-background);
-    margin: 0 calc(var(--topic-tile-padding) * -1);
-    padding: 10px 0;
-    font-size: 60px;
-
-    @media(max-width: 767px) {
-      font-size: 46px;
-    }
+    font-family: 'Pictograms', sans-serif;
+    line-height: 1;
+    color: white;
+    font-size:48px
   }
-
-  .text-box {
-    display: block;
+  .category{
     text-align: left;
+    padding:0;
+    margin:0;
+    margin-bottom:8px;
   }
-
-  .title {
-    text-decoration: none;
-    margin: 0.8em 0;
+  .title{
+    text-align: left;
+    padding:0;
+    margin:0;
   }
 }
+
+
+
+

gfi-ihk-2024/stories/sections/marketingheader/MarketingHeaderData.js

@@ -29,23 +29,20 @@ export const teaserData = [
   {
     category: 'Wachstum durch Innovation',
     title: 'Jetzt Teil der Digitalisierungswelle werden.',
-    desc: 'Neugierig auf Musterstadt 2024? Digitalisierung verändert unsere Stadt. Klicken Sie, um zu erfahren, wie Sie Teil dieser Entwicklung werden können!',
     link: '#',
-    icon: 'Person',
+    icon: 'Virus',
   },
   {
     category: 'IHK Mitgliedschaft',
     title: 'Exklusive Einblicke und Branchen-Trends:',
-    desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
     link: '#',
-    icon: 'Person',
+    icon: 'Roboter',
   },
   {
     category: 'IHK Mitgliedschaft',
     title: 'Exklusive Einblicke und Branchen-Trends:',
-    desc: 'Entfesseln Sie das volle Potenzial der generativen KI  und beherrschen Sie die Kunst des Prompt-Engineerings!',
     link: '#',
-    icon: 'Person',
+    icon: 'Stadt',
   }
 ]