23 card block

blocks/v2-cards/v2-cards.css

@@ -0,0 +1,91 @@
+main .section.v2-cards-container .v2-cards-wrapper {
+  padding: 0;
+}
+
+.v2-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px;
+  justify-content: center;
+  max-width: 1040px;
+  margin: auto;
+}
+
+.v2-cards__card-item {
+  background: var(--c-primary-white);
+  color: var(--c-primary-black);
+}
+
+.v2-cards__picture-wrapper {
+  padding: 0;
+}
+
+.v2-cards__text-wrapper {
+  padding: 24px;
+}
+
+.v2-cards__picture {
+  display: flex;
+}
+
+.v2-cards__image {
+  background: #e9eaec;
+  height: 193px;
+  width: 100%;
+  object-fit: cover;
+}
+
+.v2-cards__heading {
+  font-family: var(--ff-subheadings-medium);
+  font-size: var(--headline-5-font-size);
+  line-height: var(--headline-5-line-height);
+  margin: 0 0 7px;
+}
+
+.v2-cards__text-wrapper p {
+  margin: 0;
+  color: var(--c-primary-black);
+  font-family: var(--ff-body);
+  font-size: var(--body-1-font-size);
+  font-style: normal;
+  line-height: var(--body-1-line-height);
+  letter-spacing: 0.16px;
+}
+
+.v2-cards__text-wrapper .v2-cards__button-container {
+  margin-top: 16px;
+}
+
+.v2-cards__button-container .v2-cards__button:any-link {
+  align-items: flex-start;
+}
+
+.v2-cards__button-container .icon {
+  stroke: currentcolor;
+  width: 1em;
+  height: 1em;
+}
+
+.v2-cards__button-container .icon svg {
+  width: 1em;
+  height: 1em;
+}
+
+.v2-cards__button-container .v2-cards__button:hover {
+  color: var(--c-secondary-steel);
+}
+
+@media (min-width: 740px) {
+  .v2-cards {
+    flex-flow: row wrap;
+    gap: 16px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .v2-cards__card-item {
+    max-width: calc((100% - 32px) / 3);
+    min-width: 336px;
+  }
+}

blocks/v2-cards/v2-cards.js

@@ -0,0 +1,33 @@
+const blockClass = 'v2-cards';
+
+export default async function decorate(block) {
+  const cardsItems = [...block.querySelectorAll(':scope > div')];
+  cardsItems.forEach((el) => el.classList.add(`${blockClass}__card-item`));
+
+  const cardsSections = [...block.querySelectorAll(':scope > div > div')];
+  cardsSections.forEach((el) => {
+    el.classList.add(`${blockClass}__text-wrapper`);
+  });
+
+  const pictures = [...block.querySelectorAll('picture')];
+  pictures.forEach((el) => {
+    el.classList.add(`${blockClass}__picture`);
+    el.parentElement.classList.add(`${blockClass}__picture-wrapper`);
+    el.parentElement.classList.remove(`${blockClass}__text-wrapper`);
+  });
+
+  const images = [...block.querySelectorAll('img')];
+  images.forEach((el) => el.classList.add(`${blockClass}__image`));
+
+  const cardsHeadings = [...block.querySelectorAll('h1, h2, h3, h4, h5, h6')];
+  cardsHeadings.forEach((el) => el.classList.add(`${blockClass}__heading`));
+
+  const buttons = [...block.querySelectorAll('.button-container')];
+  buttons.forEach((el) => {
+    el.classList.add(`${blockClass}__button-container`);
+    [...el.querySelectorAll('a')].forEach((link) => {
+      link.classList.add('standalone-link', `${blockClass}__button`);
+      link.classList.remove('button', 'primary');
+    });
+  });
+}

styles/styles.css

@@ -104,7 +104,7 @@
 
   /* Helvetica Neue LT Pro, 65 Medium, 18px, 140%  */
   --headline-5-font-size: 1.125rem; /* 18px */
-  --headline-5-line-height: 150%;
+  --headline-5-line-height: 140%;
 
   /* Helvetica Neue LT Pro, 55 Roman / Helvetica Neue LT Pro, 75 Bold, 16px, 150%  */
   --body-1-font-size: 1rem; /* 16px */
@@ -245,6 +245,7 @@ h4, h5, h6 {
   margin-top: 1em;
   margin-bottom: 0.5em;
   scroll-margin: calc(var(--nav-height-m) + 1em);
+  font-weight: normal;
 }
 
 h1, h2 {
@@ -254,13 +255,13 @@ h1, h2 {
 h1 {
   font-size: var(--headline-1-font-size);
   line-height: var(--headline-1-line-height);
-  letter-spacing: var(--headline-1-line-letter-spacing);
+  letter-spacing: var(--headline-1-letter-spacing);
 }
 
 h2 {
   font-size: var(--headline-2-font-size);
   line-height: var(--headline-2-line-height);
-  letter-spacing: var(--headline-2-line-letter-spacing);
+  letter-spacing: var(--headline-2-letter-spacing);
 }
 
 h3 {
@@ -424,6 +425,7 @@ main .section.black-background {
 
 main .section.dark-background {
   background-color: var(--c-secondary-graphite);
+  color: var(--c-primary-white);
 }
 
 main .section.center {
@@ -944,6 +946,7 @@ main .section.responsive-title h1 {
   padding: 0;
 }
 
+.section.header-with-mark > .default-content-wrapper:first-child > h1:first-child::before,
 .redesign-v2 .with-marker::before {
   content: '';
   margin: 0;
@@ -955,14 +958,34 @@ main .section.responsive-title h1 {
   top: -18px;
 }
 
+.redesign-v2 a.standalone-link {
+  align-items: center;
+  color: var(--c-primary-black);
+  display: inline-flex;
+  font-family: var(--ff-body-bold);
+  font-size: var(--button-font-size);
+  gap: 4px;
+  letter-spacing: 1.12px;
+  line-height: var(--button-line-height);
+  background: transparent;
+}
+
+.redesign-v2 a.standalone-link:active,
+.redesign-v2 a.standalone-link:visited,
+.redesign-v2 a.standalone-link:hover {
+  background: transparent;
+  color: var(--c-cta-blue-active);
+}
+
 @media (min-width: 1040px) {
   .redesign-v2 .section {
     padding: 80px 0;
   }
 
   .redesign-v2 .section > div {
-    padding: 0 200px;
+    padding: 0;
     margin: 0 auto;
+    max-width: 1040px;
   }
 
   .redesign-v2 .with-marker::before {