diff --git a/blocks/hero/hero.css b/blocks/hero/hero.css index d297f527..4a13f839 100644 --- a/blocks/hero/hero.css +++ b/blocks/hero/hero.css @@ -82,6 +82,30 @@ main .section.full-width > .hero-wrapper { color: var(--white); } +.hero.block > .row > .headline { + color: var(--white); + font-size: var(--body-font-size-m); + line-height: 23px; + padding-left: 16px; +} + +.hero.block > .row > .headline > .title { + letter-spacing: 1.38px; + text-transform: uppercase; + margin-bottom: 5px; +} + +.hero.block > .row > .headline > .desc { + letter-spacing: 1.38px; + margin-bottom: 5px; +} + +.hero.block > .row > .headline a { + background-color: transparent; + border: 1px solid var(--white); + color: var(--white); +} + @media screen and (min-width: 600px) { .hero.block { height: 620px; @@ -113,5 +137,18 @@ main .section.full-width > .hero-wrapper { .hero.block > div { margin-top: 100px; } -} + .hero.block > .row { + display: flex; + } + + .hero.block > .row > .content { + flex: 2; + } + + .hero.block > .row > .headline { + flex: 1; + margin-top: 150px; + margin-left: 20px; + } +} diff --git a/blocks/hero/hero.js b/blocks/hero/hero.js index d02fcf95..902603a8 100644 --- a/blocks/hero/hero.js +++ b/blocks/hero/hero.js @@ -56,8 +56,34 @@ export default async function decorate(block) { } } + const headline = block.querySelectorAll('div.hero > div > div'); + const validInnerHtml = new Set(['headline', 'description', 'cta']); + const filteredList = Array.from(headline) + .filter((node) => validInnerHtml.has(node.innerHTML.trim().toLowerCase())); + + const headlineWrapper = document.createElement('div'); + if (filteredList.length) { + headlineWrapper.classList.add('headline'); + filteredList.forEach((div) => { + const nextElement = div.nextElementSibling; + if (div.innerHTML.toLowerCase() === 'headline') nextElement.classList.add('title'); + else if (div.innerHTML.toLowerCase() === 'description') nextElement.classList.add('desc'); + else if (div.innerHTML.toLowerCase() === 'cta') { + const button = document.createElement('p'); + button.innerHTML = nextElement.innerHTML; + button.classList.add('button-container'); + div.parentNode.replaceChild(button, nextElement); + } + headlineWrapper.append(nextElement); + }); + } + const wrapper = document.createElement('div'); wrapper.append(images, contentWrapper); + if (headlineWrapper.hasChildNodes()) { + wrapper.classList.add('row'); + wrapper.append(headlineWrapper); + } block.replaceChildren(wrapper); if (pictures.length > 1) {