Columns block

blocks/v2-columns/v2-columns.css

@@ -0,0 +1,64 @@
+.v2-columns {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.v2-columns-image,
+.v2-columns-content {
+  max-width: 343px;
+}
+
+.v2-columns-image img {
+  display: block;
+}
+
+.v2-columns-content {
+  padding: 40px 0;
+}
+
+.v2-columns-content .v2-columns-content__eyebrow {
+  font-family: var(--ff-accents-regular);
+  font-size: var(--accent-2-font-size);
+  line-height: var(--accent-2-line-height);
+  margin: 0;
+}
+
+.v2-columns-content .v2-columns-content__headline {
+  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-content .v2-columns-content__body {
+  font-size: var(--body-1-font-size);
+  margin: 0 0 32px;
+}
+
+.v2-columns-content a.button {
+  margin: 0;
+}
+
+@media (min-width: 744px) {
+  .v2-columns {
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+    column-gap: 56px;
+  }
+
+  .v2-columns-content,
+  .v2-columns-image {
+    width: 50%;
+    padding: 0;
+  }
+
+  .v2-columns-content .v2-columns-content__headline {
+    margin: 24px 0 12px;
+  }
+
+  .v2-columns-content .v2-columns-content__body {
+    margin: 0 0 24px;
+  }
+}

blocks/v2-columns/v2-columns.js

@@ -0,0 +1,31 @@
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
+import { getTextLabel, createElement } from '../../scripts/common.js';
+
+const ctaText = getTextLabel('learn more');
+
+export default async function decorate(block) {
+  const picture = block.querySelector('picture');
+  const blockConfig = readBlockConfig(block);
+  const [, eyebrow, headline, body, link] = Object.values(blockConfig);
+
+  const columnsImage = createElement('div', { classes: 'v2-columns-image' });
+  const columnsText = createElement('div', { classes: 'v2-columns-content' });
+
+  const eyebrowElmt = createElement('p', { classes: 'v2-columns-content__eyebrow' });
+  eyebrowElmt.textContent = eyebrow;
+  const headlineElmt = createElement('h2', { classes: 'v2-columns-content__headline' });
+  headlineElmt.textContent = headline;
+  const bodyElmt = createElement('p', { classes: 'v2-columns-content__body' });
+  bodyElmt.textContent = body;
+  const ctaElmt = createElement('a', {
+    classes: ['button', 'button--large', 'button--primary'],
+    props: { type: 'button', href: link },
+  });
+  ctaElmt.textContent = ctaText;
+
+  columnsImage.appendChild(picture);
+  columnsText.append(eyebrowElmt, headlineElmt, bodyElmt, ctaElmt);
+
+  block.textContent = '';
+  block.append(columnsImage, columnsText);
+}

placeholder.json

@@ -1,7 +1,7 @@
 {
-  "total": 21,
+  "total": 22,
   "offset": 0,
-  "limit": 21,
+  "limit": 22,
   "data": [
     {
       "Key": "Low resolution video message",
@@ -86,6 +86,10 @@
     {
       "Key": "channel aria label",
       "Text": "channel"
+    },
+    {
+      "Key": "learn more",
+      "Text": "Learn More"
     }
   ],
   ":type": "sheet"

styles/styles.css

@@ -154,6 +154,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 */