Ready to make a difference block

blocks/career-apply/career-apply.css

@@ -0,0 +1,73 @@
+.career-apply-wrapper {
+    background-color: var(--primary);
+}
+
+.career-apply {
+    color: var(--white);
+    text-align: left;
+    max-width: unset;
+    padding-inline: 16px;
+    padding-block: 48px;
+}
+
+.career-apply h2 {
+    color: var(--white);
+    font-size: 28px;
+    margin-bottom: 16px;
+}
+
+.career-apply p {
+    line-height: 24px;
+    margin-bottom: 24px;
+}
+
+.career-apply .button-container {
+    display: inline-flex;
+    flex-direction: column;
+}
+
+.career-apply a {
+    margin: 8px 0;
+}
+
+.career-apply a.button.primary.linkedin {
+    background-color: var(--primary);
+    border: 1px solid white;
+    padding-left: 40px;
+}
+
+.career-apply span.icon-linkedin {
+    margin-left: 10px;
+    margin-right: 16px;
+    height: 32px;
+    width: 34px;
+}
+
+.career-apply span.icon-linkedin svg {
+    /* This is needed as otherwise the icon is shown twice */
+    display: none;
+}
+
+@media (min-width: 62rem) {
+    .career-apply {
+        max-width: 720px;
+        text-align: center;
+        padding-block: 80px;
+    }
+
+    .career-apply h2 {
+        font-size: var(--heading-font-size-mxl);
+    }
+
+    .career-apply p {
+        margin-bottom: 50px;
+    }
+
+    .career-apply .button-container {
+        flex-direction: row;
+    }
+
+    .career-apply a {
+        margin: 0 8px;
+    }
+}

blocks/career-apply/career-apply.js

@@ -0,0 +1,38 @@
+import { getLanguage } from '../../scripts/scripts.js';
+import { decorateIcons, fetchPlaceholders } from '../../scripts/lib-franklin.js';
+
+export default async function decorate(block) {
+  const placeholders = await fetchPlaceholders(getLanguage());
+
+  const section = document.querySelector('.section.career-apply-container');
+  if (section) {
+    section.classList.add('full-width');
+  }
+
+  const title = document.createElement('h2');
+  title.innerText = placeholders['career-apply-title'];
+  block.appendChild(title);
+
+  const msg = document.createElement('p');
+  msg.innerText = placeholders['career-apply-msg'];
+  block.appendChild(msg);
+
+  const buttonBar = document.createElement('p');
+  buttonBar.classList.add('button-container');
+  const search = document.createElement('a');
+  search.innerText = placeholders['career-apply-search'];
+  search.classList.add('button', 'primary');
+  search.href = '#';
+  buttonBar.appendChild(search);
+
+  const linkedin = document.createElement('a');
+  linkedin.innerText = placeholders['career-apply-linkedin'];
+  linkedin.classList.add('button', 'primary', 'linkedin');
+  linkedin.href = '#';
+  const sprite = document.createElement('span');
+  sprite.classList.add('icon', 'icon-linkedin');
+  linkedin.appendChild(sprite);
+  decorateIcons(linkedin);
+  buttonBar.append(linkedin);
+  block.appendChild(buttonBar);
+}