diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css index 7e1e8f506d..d15469b265 100644 --- a/libs/blocks/icon-block/icon-block.css +++ b/libs/blocks/icon-block/icon-block.css @@ -104,6 +104,10 @@ margin-bottom: 0; } +.icon-block.inline .body-s.action-area { + padding-top: 24px; +} + .icon-block.inline .icon-area, .icon-block.inline .icon-area picture img { min-width: var(--icon-size-xxl); @@ -255,10 +259,6 @@ width: 100%; } -.section[class*="-up"] .icon-block .action-area { - align-self: end; -} - .icon-block.full-width .foreground .text-content .action-area { justify-content: center; } @@ -350,6 +350,10 @@ margin-top: var(--spacing-s); } +.icon-block.inline .cta-container .body-s.action-area { + padding-top: 0; +} + .section[class*="-up"] .icon-block .cta-container { display: flex; align-items: flex-end; diff --git a/libs/blocks/icon-block/icon-block.js b/libs/blocks/icon-block/icon-block.js index 2ebce4f6a4..b7163a1f3d 100644 --- a/libs/blocks/icon-block/icon-block.js +++ b/libs/blocks/icon-block/icon-block.js @@ -75,16 +75,14 @@ function decorateContent(el) { if (secondColumn.children.length === 1) el.classList.add('items-center'); el.querySelector('.foreground .text-content').append(secondColumn); } - const actionAreas = el.querySelectorAll('.action-area'); - if (actionAreas.length) { + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { const div = createTag('div', { class: 'cta-container' }); - const lastCta = actionAreas[actionAreas.length - 1]; - const secondLastCta = actionAreas[actionAreas.length - 2]; - lastCta.insertAdjacentElement('afterend', div); - if (secondLastCta && lastCta.previousElementSibling === secondLastCta) { - div.append(secondLastCta); + lastActionArea.insertAdjacentElement('afterend', div); + if (lastActionArea.previousElementSibling.className.includes('action-area')) { + div.append(lastActionArea.previousElementSibling); } - div.append(lastCta); + div.append(lastActionArea); } } } diff --git a/libs/blocks/media/media.js b/libs/blocks/media/media.js index fc7b43c7db..8c8ea3d3c2 100644 --- a/libs/blocks/media/media.js +++ b/libs/blocks/media/media.js @@ -87,14 +87,14 @@ export default function init(el) { link.className = 'body-xxs'; }); } - const lastCta = el.querySelector('.action-area:last-of-type'); - if (lastCta) { + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { const div = createTag('div', { class: 'cta-container' }); - lastCta.insertAdjacentElement('afterend', div); - if (lastCta.previousElementSibling.className.includes('icon-stack-area')) { - div.append(lastCta.previousElementSibling); + lastActionArea.insertAdjacentElement('afterend', div); + if (lastActionArea.previousElementSibling.className.includes('icon-stack-area')) { + div.append(lastActionArea.previousElementSibling); } - div.append(lastCta); + div.append(lastActionArea); } container.append(row); }); diff --git a/libs/blocks/text/text.js b/libs/blocks/text/text.js index d79e4ec638..c6f14eeea3 100644 --- a/libs/blocks/text/text.js +++ b/libs/blocks/text/text.js @@ -110,10 +110,11 @@ export default function init(el) { el.classList.add(...helperClasses); decorateTextOverrides(el); if (!hasLinkFarm) decorateMultiViewport(el); - const actionArea = el.querySelector('.action-area:last-of-type'); - if (actionArea) { + + const lastActionArea = el.querySelector('.action-area:last-of-type'); + if (lastActionArea) { const div = createTag('div', { class: 'cta-container' }); - actionArea.insertAdjacentElement('afterend', div); - div.append(actionArea); + lastActionArea.insertAdjacentElement('afterend', div); + div.append(lastActionArea); } }