diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js index 9b1dc6c..ee97014 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaser.stories.js @@ -42,3 +42,9 @@ StandardMiniTeaser.args = {}; export const infobanner = MiniTeaser.bind({}); infobanner.args = {type:'infoteaser'}; + +export const infobannerWithoutIcon = MiniTeaser.bind({}); +infobannerWithoutIcon.args = {type:'infoteaser', icon: null}; + +export const infobannerBackground = MiniTeaser.bind({}); +infobannerBackground.args = {type:'infoteaser', backgroundImage: 'https://source.unsplash.com/2vCqH34PqWs/1080x648'}; diff --git a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js index 80827c4..70cd288 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js +++ b/gfi-ihk-2024/stories/components/mini-teaser/MiniTeaserComponent.js @@ -8,6 +8,7 @@ export const createMiniTeaser = ({ link = '#', icon = 'Roboter', buttonlabel = 'IHK-Newsletter sichern', + backgroundImage = null, }) => { if (type === 'standard') { @@ -19,13 +20,20 @@ export const createMiniTeaser = ({ return tile; }else{ const tile = createElement('div', ['tile', 'mini-teaser', type], null); + if (backgroundImage && backgroundImage.length > 0) { + tile.style = 'background-image: url(' + backgroundImage + ');'; + tile.classList.add('background-image'); + } const textBox = createElement('div', ['text-box'], null, tile); - createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); - createElement('h4', ['title'], title, textBox); - textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + if (icon && icon.length > 0) { + createElement('div', ['icon-box', 'pictogram-' + icon.toLowerCase().split(' ').join('-')], null, textBox); + createElement('h4', ['title'], title, textBox); + textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + }else{ + createElement('h4', ['title', 'noicon'], title, textBox); + textBox.appendChild(createButton({color: 'white', label: buttonlabel,link: link, iconPosition: 'icon-right', icon: null})) + } + return tile; } - - - } \ No newline at end of file diff --git a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss index eae215b..fada232 100644 --- a/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss +++ b/gfi-ihk-2024/stories/components/mini-teaser/miniteaser.scss @@ -35,8 +35,12 @@ h4{ font-size: 22px; } + .text-box{ + position: relative; + } &.infoteaser{ background: linear-gradient(161deg, rgba(var(--theme-color-primary-rgb), 1) 0%, rgba(var(--theme-color-primary-rgb), 0.2) 100%); + position: relative; &:after{ content:""; position:absolute; @@ -47,6 +51,26 @@ 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%); } + &.background-image{ + background-size:cover; + &:after{ + position:absolute; + top:0; + left:0; + bottom:0; + right:0; + z-index: 0; + content:""; + opacity: 0.6; + background: linear-gradient(87deg, #036 12.55%, rgba(1, 40, 81, 0.86) 56.52%, rgba(0, 51, 102, 0.00) 94.05%); + background-blend-mode: overlay; + + } + .text-box{ + position: relative; + z-index: 1; + } + } .title, .category, .btn{ color:white; } @@ -57,6 +81,14 @@ text-align: left; line-height: 24px; margin-bottom: 19px; + width: 100%; + &.noicon{ + padding-left: 0; + min-height: 0; + + .btn{ + margin-left: 0; + } + } } .btn{ background-color: transparent; @@ -69,14 +101,18 @@ --button-padding: 8px 10px; min-height: 0; font-size: 22px; + &:after{ + border-radius:16px; + } } .icon-box{ margin-bottom: 19px; margin-top: 0; padding-top: 0; position: absolute; - top: 16px; - left: 12px; + top: 0; + left: 0; + } .text-box{ padding: 0;