diff --git a/libs/blocks/editorial-card/editorial-card.css b/libs/blocks/editorial-card/editorial-card.css index 862072b04e..34b91d3e1d 100644 --- a/libs/blocks/editorial-card/editorial-card.css +++ b/libs/blocks/editorial-card/editorial-card.css @@ -55,7 +55,7 @@ min-width: initial; } -.editorial-card.has-footer { +.editorial-card.equal-height { height: 100%; } @@ -100,6 +100,8 @@ row-gap: var(--spacing-xxs); } +.editorial-card .footer.empty { padding: 0; } + .editorial-card.no-bg.no-border .foreground { padding: var(--spacing-s) 0; } @@ -158,7 +160,7 @@ display: flex; align-items: center; justify-content: right; - gap: var(--spacing-xxs); + gap: var(--spacing-xs); flex-flow: wrap; flex-direction: row; } @@ -177,7 +179,7 @@ border: none; height: 1px; width: 100%; - margin: var(--spacing-xs) 0; + margin: var(--spacing-xxs) 0; } .editorial-card .background { diff --git a/libs/blocks/editorial-card/editorial-card.js b/libs/blocks/editorial-card/editorial-card.js index 9451f6ea88..713a571d05 100644 --- a/libs/blocks/editorial-card/editorial-card.js +++ b/libs/blocks/editorial-card/editorial-card.js @@ -47,6 +47,7 @@ const decorateForeground = async (el, rows) => { await decorateLockupFromContent(row); } else if (i === (rows.length - 1)) { row.classList.add('footer'); + if (row.textContent.trim() === '') row.classList.add('empty'); } else { row.classList.add('extra-row'); } @@ -86,7 +87,7 @@ const init = async (el) => { if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup'); let rows = el.querySelectorAll(':scope > div'); const [head, middle, ...tail] = rows; - if (rows.length === 4) el.classList.add('has-footer'); + if (rows.length === 4) el.classList.add('equal-height'); if (rows.length >= 1) { const count = rows.length >= 3 ? 'three-plus' : rows.length; switch (count) {