teaser new icons

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

@@ -488,3 +488,7 @@
 @mixin icon-fa-play-circled { content: '\f144'; }
 @mixin icon-fa-cart-plus { content: '\f217'; }
 @mixin icon-fa-cart-arrow-down { content: '\f218'; }
+
+@mixin icon-galerie-small { content: '\e870'; }
+@mixin icon-interaction-small { content: '\e871'; }
+@mixin icon-video-small { content: '\e872'; }

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

@@ -106,4 +106,7 @@
 .icon-lokalisierung:before { content: '\e8c9'; }
 .icon-login-flyout:before { content: '\e8ca'; }
 .icon-login-header:before { content: '\e8cb'; }
-.icon-social-twitter:before { content: '\e85d'; }
+.icon-social-twitter:before { content: '\e85d'; }
+.icon-galerie-small:before { content: '\e870'; }
+.icon-interaction-small:before { content: '\e871'; }
+.icon-video-small:before { content: '\e872'; }

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

@@ -287,14 +287,3 @@
 .pictogram-hochtaunus:before { content: '\e91e'; } /* '' */
 .pictogram-main-taunus:before { content: '\e91f'; } /* '' */
 .pictogram-paulskirche:before { content: '\e920'; } /* '' */
-.pictogram-kaffeetasse:before { content: '\e921'; } /* '' */
-.pictogram-ostereier:before { content: '\e922'; } /* '' */
-.pictogram-osterhase:before { content: '\e923'; } /* '' */
-.pictogram-lupe-a:before { content: '\e924'; } /* '' */
-.pictogram-lupe-b:before { content: '\e925'; } /* '' */
-.pictogram-pinnwandnadel:before { content: '\e926'; } /* '' */
-.pictogram-sektglaeser:before { content: '\e927'; } /* '' */
-.pictogram-hand-zeigend:before { content: '\e928'; } /* '' */
-.pictogram-person-zeigend:before { content: '\e929'; } /* '' */
-.pictogram-zug-a:before { content: '\e92a'; } /* '' */
-.pictogram-zug-b:before { content: '\e92b'; } /* '' */

gfi-ihk-2024/stories/assets/fonts/icons/icons.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2023 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2025 by original authors @ fontello.com</metadata>
 <defs>
 <font id="icons" horiz-adv-x="1000" >
 <font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@@ -218,6 +218,12 @@
 
 <glyph glyph-name="volume-on" unicode="&#xe86f;" d="M563 4c-3 0-6 0-9 1-18 1-35 8-49 18l-265 169h-115c-26 0-50 10-68 28-18 18-28 42-28 67v125a96 96 0 0 0 96 96h115l267 170c12 10 29 16 47 18 18 1 36-2 51-10 16-8 30-20 39-35 9-16 14-33 14-51v-500a96 96 0 0 0-53-85c-13-7-28-10-42-10v-1z m-280 239l260-165c6-5 12-7 17-7 5-1 11 1 16 3a29 29 0 0 1 16 26v500c0 5-1 11-4 15a28 28 0 0 1-12 11c-5 2-10 3-16 3-5 0-10-2-15-6l-261-166v-214h-1z m-158 199c-7 0-15-3-20-9-6-6-9-13-9-21v-125c0-7 3-15 9-20 5-6 13-9 20-9h92v183h-92v1z m770-282a33 33 0 0 0-28 52 243 243 0 0 1 38 130c0 46-13 91-38 130a33 33 0 1 0 56 35 308 308 0 0 0 48-166c0-59-17-116-48-166-7-10-17-15-28-15v0z m-121 55c-8 0-15 2-21 7a34 34 0 0 0-5 47c16 20 25 45 25 71s-9 51-25 71a33 33 0 1 0 52 42c25-32 40-72 40-113 0-41-15-81-40-113-7-8-17-12-26-12z" horiz-adv-x="1000" />
 
+<glyph glyph-name="galerie-small" unicode="&#xe870;" d="M361 489c31 0 56 25 56 55 0 31-25 56-56 56-31 0-55-25-55-56 0-30 24-55 55-55z m-222 194c0 46 37 84 83 84h556c46 0 83-38 83-84v-611c0-46-37-83-83-83h-556c-46 0-83 37-83 83v611z m83-486v-125h556v125h-556z m0 84h148l213 243 195-222v381h-556v-402z m361 117l-102-117h205l-103 117z m320-451v625h83v-666c0-24-18-42-42-42h-611v83h570z" horiz-adv-x="1000" />
+
+<glyph glyph-name="interaction-small" unicode="&#xe871;" d="M533 717c9 14 6 33-8 43-14 9-33 6-43-8l-263-389-4-5c-10-10-24-15-38-13-15 3-26 13-31 26l-2 6-34 152c-1 6-7 9-12 9l-2 0c-5-2-9-6-9-11l-3-342c0-42 21-81 55-105l160-108c96-65 225-40 290 56l117 173c9 12 5 29-7 37-8 6-18 6-27 2l-4-3-29-22c-16-12-39-11-54 3-14 14-17 37-5 54l39 58c7 10 4 25-7 32-8 6-18 6-26 1l-3-3-50-46c-16-15-39-15-56-2-16 14-19 38-7 55l28 41c8 12 5 29-7 37-11 7-26 6-34-4l-41-44c-15-16-40-18-57-5-17 14-21 38-9 56l183 269z m-28-188c12-4 22-8 32-15 24-16 39-40 45-65 27 4 54-2 77-18 36-24 53-67 46-107 14-2 28-8 41-17 50-34 63-102 29-152l-117-174c-91-134-272-169-405-78l-160 108c-58 39-92 105-92 174l3 342c0 43 29 80 70 91l10 2c49 8 96-24 107-73l13-57 209 308c35 53 106 66 158 31 52-35 66-106 31-158l-97-142z m247-86l-13-2c-13-2-26-1-38 1l-13 3c-12 3-24 9-35 16l-11 7c-6 6-13 12-18 18l-8 10-7 11c-4 8-8 16-10 24l-4 12c-2 13-3 26-2 39l1 13c3 13 7 25 13 36l6 12c7 11 16 20 26 29l10 8c10 7 22 13 34 17l13 3c12 3 25 4 38 3l13-2c13-2 25-6 37-12l11-7c11-7 21-15 29-25l8-10c10-14 17-30 21-47l2-13c1-13 1-26-1-39l-3-12c-4-13-9-25-16-35l-8-11c-8-10-17-19-28-26l-11-7c-11-7-23-11-36-14z m-13 83c3 1 6 2 9 3l4 3c3 3 7 6 10 10l3 3c2 5 4 9 5 13l1 5c1 5 2 10 1 14l-1 5c-1 6-4 12-7 17l-3 4c-3 4-7 7-11 9l-4 3c-4 2-9 3-14 4l-4 1c-5 0-10 0-14-1l-5-1c-4-2-9-4-13-7l-3-3c-4-3-7-6-10-10l-2-4c-2-5-4-9-5-14l0-5c-1-4 0-9 1-14l1-4c1-3 2-6 4-9l2-4 3-4c2-2 5-4 7-6l4-3c4-3 8-5 13-6l4-1c7-1 13-1 19 0l5 2z m45-223l-9 40-9 41c22 5 42 13 61 25l8 5c18 13 33 29 46 47l5 8c14 21 23 45 27 70 4 21 4 44 0 65l-1 10c-6 24-16 48-31 68l-5 8c-14 17-30 32-49 44l-8 5c-19 11-40 18-62 22l-9 1c-22 3-45 2-66-3l-18 81c31 7 62 9 94 5l13-2c31-5 61-16 89-32l11-7c27-17 51-38 70-63l8-11c21-29 36-63 44-98l2-13c6-32 6-63 0-95-6-35-19-69-38-100l-8-11c-18-26-41-49-66-67l-12-7c-26-17-56-29-87-36z" horiz-adv-x="1000" />
+
+<glyph glyph-name="video-small" unicode="&#xe872;" d="M83 656h834v-612h-834v612z m-27 83c-31 0-56-25-56-56v-666c0-31 25-56 56-56h888c31 0 56 25 56 56v666c0 31-25 56-56 56h-888z m680-389c0 15-8 29-21 36l-333 193c-13 7-29 7-42 0-13-8-21-22-21-37l0-384c0-15 8-29 21-36 13-8 29-8 42 0l333 192c13 7 21 21 21 36z m-333 120l208-120-208-120 0 240z" horiz-adv-x="1000" />
+
 <glyph glyph-name="userlike" unicode="&#xe8c6;" d="M826 850h-652c-63 0-114-51-114-114v-662c0-63 51-114 114-114h487l279-110v224 12 650c0 63-51 114-114 114z m-23-673c-89-62-194-95-303-95-109 0-214 33-303 95-14 10-17 30-7 44 9 14 29 18 43 8 79-55 171-84 267-84 96 0 188 29 267 84 14 10 34 6 44-8 10-14 6-34-8-44z" horiz-adv-x="1000" />
 
 <glyph glyph-name="userlike-chat" unicode="&#xe8c7;" d="M500 825c-262 0-475-213-475-475s213-475 475-475c76 0 149 18 212 50h135c14 0 28 5 37 15 10 10 16 24 16 38v116c49 76 75 165 75 256 0 262-213 475-475 475z m252-648c-7-8-14-12-28-12h-448c-11 0-21 5-28 12-8 7-12 17-12 28 0 10 5 20 12 28 7 7 17 11 28 11h448c13 0 21-4 28-11 8-8 12-18 12-28 0-11-4-21-12-28z m0 145c-7-7-17-11-28-11h-369c-11 0-21 4-28 11-8 8-12 18-12 28s5 21 12 28c7 8 17 12 28 12h369c11 0 21-5 28-12 8-7 12-17 12-28s-4-20-12-28z m0 145c-7-7-15-11-28-11h-448c-11 0-21 4-28 11-8 8-12 18-12 28 0 11 5 21 12 28 7 8 17 12 28 12h448c13 0 21-4 28-12 8-7 12-17 12-28 0-10-4-20-12-28z" horiz-adv-x="1000" />

gfi-ihk-2024/stories/components/teaser/Teaser.stories.js

@@ -114,6 +114,21 @@ ExternalTeaser.args = {
   linkType: 'extern',
 };
 
+export const GalleryTeaser = Template.bind({});
+GalleryTeaser.args = {
+  linkType: 'gallery',
+};
+
+export const InteractionTeaser = Template.bind({});
+InteractionTeaser.args = {
+  linkType: 'interaction',
+};
+
+export const VideoTeaser = Template.bind({});
+VideoTeaser.args = {
+  linkType: 'video',
+};
+
 export const FullwidthTeaserLarge = Template.bind({});
 FullwidthTeaserLarge.args = {
   type: 'fullwidth',

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

@@ -238,8 +238,8 @@
   }
 }
 
-.col.extern, .col.download, .col.intranet, .col.extranet,
-.teaser.extern, .teaser.download, .teaser.intranet, .teaser.extranet {
+.col.extern, .col.download, .col.intranet, .col.extranet, .col.gallery, .col.interaction, .col.video,
+.teaser.extern, .teaser.gallery, .teaser.interaction, .teaser.video, .teaser.download, .teaser.intranet, .teaser.extranet {
   &:before {
     display: none;
   }
@@ -278,6 +278,21 @@
   @include icon-small-schloss;
 }
 
+.col.gallery .title:after,
+.teaser.gallery .title:after {
+  @include icon-galerie-small;
+}
+
+.col.interaction .title:after,
+.teaser.interaction .title:after {
+  @include icon-interaction-small;
+}
+
+.col.video .title:after,
+.teaser.video .title:after {
+  @include icon-video-small;
+}
+
 @media(min-width: 568px) {
   [date-type='fullwidth'], .teaser.fullwidth, .teasers[data-items="1"] {
     display: block;