Columns block

blocks/v2-columns/v2-columns.css

@@ -0,0 +1,87 @@
+.v2-columns__row {
+  flex-direction: column;
+  display: flex;
+  gap: 0;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.v2-columns__column--with-image,
+.v2-columns__column--with-text {
+  max-width: 512px;
+}
+
+.v2-columns__column--with-image {
+  order: 0;
+}
+
+.v2-columns__column--with-image img {
+  display: block;
+}
+
+.v2-columns__column--with-text {
+  order: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 40px 0;
+}
+
+.v2-columns__column--with-text .v2-columns__pretitle {
+  font-family: var(--ff-accents-regular);
+  font-size: var(--accent-2-font-size);
+  line-height: var(--accent-2-line-height);
+  margin: 0;
+}
+
+.v2-columns__column--with-text .v2-columns__heading {
+  font-size: var(--headline-1-font-size);
+  line-height: var(--headline-1-line-height);
+  letter-spacing: var(--headline-1-letter-spacing);
+  margin: 12px 0;
+}
+
+.v2-columns__column--with-text .v2-columns__body {
+  font-size: var(--body-1-font-size);
+  margin: 0 0 32px;
+}
+
+.v2-columns__column--with-text a.button {
+  width: fit-content;
+  margin: 0;
+}
+
+.v2-columns__column--with-text a.button:not(a.button:first-of-type) {
+  margin: 5px 0 0;
+}
+
+@media (min-width: 744px) {
+  .v2-columns {
+    width: 100%;
+  }
+
+  .v2-columns__row {
+    flex-direction: row;
+    gap: 16px;
+  }
+
+  .v2-columns__column--with-text,
+  .v2-columns__column--with-image {
+    flex-direction: column;
+    width: 100%;
+    padding: 0;
+    order: unset;
+  }
+
+  .v2-columns__column--with-text {
+    padding: 0 56px;
+  }
+
+  .v2-columns__column--with-text .v2-columns__heading {
+    margin: 24px 0 12px;
+  }
+
+  .v2-columns__column--with-text .v2-columns__body {
+    margin: 0 0 24px;
+  }
+}

blocks/v2-columns/v2-columns.js

@@ -0,0 +1,55 @@
+import { createElement } from '../../scripts/common.js';
+
+export default async function decorate(block) {
+  const blockName = 'v2-columns';
+  const rows = [...block.querySelectorAll(':scope > div')];
+  const columns = [...block.querySelectorAll(':scope > div > div')];
+
+  rows.forEach((row) => {
+    row.classList.add(`${blockName}__row`);
+  });
+
+  columns.forEach((col) => {
+    col.classList.add(`${blockName}__column`);
+
+    const picture = col.querySelector('picture');
+    const allTextElmts = col.querySelectorAll('p');
+    const bodyElmts = [];
+
+    if (picture) {
+      col.classList.add(`${blockName}__column--with-image`);
+    } else {
+      col.classList.add(`${blockName}__column--with-text`);
+    }
+
+    allTextElmts.forEach((e) => {
+      const nextElmt = e.nextElementSibling;
+
+      const isButton = [...e.classList].includes('button-container');
+      const isPretitle = nextElmt?.tagName.toLowerCase()[0] === 'h';
+
+      if (!isPretitle && !isButton) bodyElmts.push(e);
+    });
+    bodyElmts.forEach((e) => e.classList.add(`${blockName}__body`));
+
+    const buttons = [...col.querySelectorAll('a')];
+    buttons.forEach((btn) => {
+      btn.classList.add('button', 'button--large', 'button--primary');
+
+      if (btn.parentElement.classList.contains('button-container')) {
+        btn.parentElement.replaceWith(btn);
+      }
+    });
+
+    const headings = [...col.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+    headings.forEach((heading) => heading.classList.add(`${blockName}__heading`));
+
+    const pretitleText = headings[0]?.previousElementSibling;
+
+    if (pretitleText) {
+      const pretitle = createElement('span', { classes: `${blockName}__pretitle` });
+      pretitle.textContent = pretitleText.textContent;
+      pretitleText.replaceWith(pretitle);
+    }
+  });
+}

placeholder.json

@@ -93,4 +93,4 @@
     }
   ],
   ":type": "sheet"
-}
+}

styles/styles.css

@@ -157,6 +157,7 @@
 
   /* Accent elements */
   --ff-accents-medium: "GT America Mono Medium", var(--fallback-ff-accents);
+  --ff-accents-regular: "GT America Mono Regular", var(--fallback-ff-accents);
 
   /* Body font sizes */
   --body-font-size-xxl: 1.5rem; /* 24px */