infobox

gfi-ihk-2024/stories/components/infobox/InfoboxComponent.js

@@ -9,7 +9,7 @@ export const createInfobox =
          full = false,
          kicker = 'Dachzeile',
          headline = 'Dies ist eine Zwischenheadline mit der Maximalbefüllung von 80 Zeichen.',
-         image = './dummy/placeholder-1-1.svg',
+         icon = 'pictogram-tl_dr',
          text = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
          ul = 'List Styles werden über externe Klasse Richtext geladen',
          ol = 'Lorem ipsum dolor sit',
@@ -42,7 +42,7 @@ export const createInfobox =
             }
             content.appendChild(button);
 
-            createImage(image, 70, 70, '', [], infobox);
+            createElement('div', ['icon-box', icon], null, infobox);
         }
 
 

gfi-ihk-2024/stories/components/infobox/infobox.scss

@@ -81,14 +81,20 @@ article.col div.strong {
   .infobox--content {
     flex: 1;
   }
-  img {
+  .icon-box {
     flex-shrink: 0;
-    width: 70px;
-    height: 70px;
+    margin-top: -15px;
+    width: 76px;
+    height: 76px;
+    font-size: 76px;
+    line-height: 76px;
+    font-family: "Pictograms", sans-serif;
+    color: var(--theme-color-secondary);
     @media (max-width: 767px) {
       position: absolute;
       right: 15px;
       top: 15px;
+      margin-top: 0;
     }
   }
   h2, .like-h2 {