diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-1-about.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-1-about.twig
new file mode 100644
index 0000000000..c68b5dc2b1
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-1-about.twig
@@ -0,0 +1,663 @@
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Hi, we're Pegasystems.<br />But you can call us Pega.",
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+    {% include '@bolt-components-headline/subheadline.twig' with {
+      text: "Looking for innovative software that crushes business complexity? A growing company with a deep commitment to our clients and communities? You've come to the right place.",
+      tag: 'h2',
+      size: 'large',
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% set video %}
+      <video-js
+        data-account="1900410236"
+        data-player="O3FkeBiaDz"
+        data-embed="default"
+        data-video-id="6236693947001"
+        data-media-duration
+        data-media-title
+        controls
+        class="c-base-video"></video-js>
+    {% endset %}
+    {% include '@bolt-elements-ratio/ratio.twig' with {
+      content: video,
+      ratio: 'wide'
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement
+    } only %}
+  {% endset %}
+
+  {% set layer_background %}
+    {% include '@bolt-elements-image/image.twig' with {
+      background: true,
+      attributes: {
+        alt: 'Image alt text',
+        src: '/images/placeholders/backgrounds/background-light.jpg',
+        loading: 'eager',
+        width: '100vw'
+      },
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    background: layer_background,
+    padding_top: 'xlarge',
+    padding_bottom: 'large',
+    gutter: 'large',
+    row_gutter: 'large',
+    valign_items: 'center',
+    template: [
+      'halves@from-medium'
+    ],
+    attributes: {
+      class: 't-bolt-gray-xlight'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_tiles %}
+    {% set tile %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'Image alt text',
+          src: '/images/content/icons/employees.png',
+          loading: 'eager',
+          width: 80,
+          height: 80,
+          attributes: {
+            class: 'u-bolt-margin-bottom-small',
+          },
+        },
+      } only %}
+      {% include '@bolt-components-headline/subheadline.twig' with {
+        text: '<strong>6,000</strong> global employees',
+        tag: 'h3',
+        size: 'large',
+      } only %}
+    {% endset %}
+
+    {% for i in 1..4 %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: tile,
+        attributes: {
+          class: 'u-bolt-text-align-center',
+        }
+      } only %}
+    {% endfor %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_tiles,
+      gutter: 'large',
+      padding_bottom: 'medium',
+      template: [
+        'tiles@from-small'
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_button %}
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Download corporate fact sheet',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_button,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "What we do",
+      tag: 'h2',
+      size: 'xxlarge',
+    } only %}
+    <p>The <a href="https://www.pega.com/products/platform" data-google-analytics-et-processed="true">Pega Platform™</a> makes it simpler for enterprises to work smarter, unify experiences, and adapt instantly. Thanks to our scalable, made-to-measure architecture, even the biggest organizations can stay streamlined and ready for what’s next.</p>
+    {% set button_1 %}
+      {% include '@bolt-elements-button/button.twig' with {
+        content: 'Explore Products',
+        display: 'block',
+        attributes: {
+          href: '#!',
+        }
+      } only %}
+    {% endset %}
+    {% set button_2 %}
+      {% include '@bolt-elements-button/button.twig' with {
+        content: 'Why Pega',
+        display: 'block',
+        hierarchy: 'secondary',
+        attributes: {
+          href: '#!',
+        }
+      } only %}
+    {% endset %}
+    {% include '@bolt-components-list/list.twig' with {
+      display: 'inline',
+      spacing: 'small',
+      items: [
+        button_1,
+        button_2
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: '/images/placeholders/16x9.jpg',
+        loading: 'eager',
+        width: 800,
+        height: 450,
+        style: 'display: block;',
+      },
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      valign_self: 'end-offset',
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      'halves@from-medium'
+    ]
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Meet our industry-leading clients",
+      tag: 'h2',
+      size: 'xlarge',
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% set layer_logo %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          src: '/images/content/logos/logo-atos.png',
+          alt: 'Image alt text',
+        },
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..5 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_logo,
+          attributes: {
+            class: 'u-bolt-text-align-center',
+          }
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      template: [
+        'tiles@from-small'
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_button %}
+      {% include '@bolt-elements-button/button.twig' with {
+        content: 'See more clients',
+        attributes: {
+          href: '#!',
+        }
+      } only %}
+  {% endset %}
+
+  {% set layout_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_button,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layout_items,
+    top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-gray-xlight'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "See how we deliver value, fast",
+      tag: 'h2',
+      size: 'xlarge',
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Forrester measured Pega's Total Economic Impact™:",
+      tag: 'span',
+      size: 'large',
+      weight: 'regular',
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% set stat_item %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "$000M+%",
+        tag: 'span',
+        size: 'xxlarge',
+        attributes: {
+          class: 'u-bolt-text-align-center',
+        }
+      } only %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "in something important",
+        tag: 'span',
+        size: 'large',
+        weight: 'regular',
+        attributes: {
+          class: 'u-bolt-text-align-center',
+        }
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: stat_item,
+          attributes: {
+            class: 'u-bolt-text-align-center',
+          }
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      template: [
+        'tiles@from-small'
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_button %}
+      {% include '@bolt-elements-button/button.twig' with {
+        content: 'Get the reports',
+        attributes: {
+          href: '#!',
+        }
+      } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_button,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-gray-xlight'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Who we are",
+      tag: 'h2',
+      size: 'xxlarge',
+    } only %}
+    <p>We’re a <a href="/insights/resources/history-pega-our-founder-ceo-looks-back" data-google-analytics-et-processed="true">different kind of tech company</a>. A global business rooted in family. A relentless, client-first innovator since 1983. And a trusted partner to the world’s leading brands.</p>
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Meet our leadership team',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: '/images/content/icons/badge-pw.png',
+        width: 200,
+      },
+    } only %}
+  {% endset %}
+
+  {% set layer_quote %}
+    {% include '@bolt-components-blockquote/blockquote.twig' with {
+      'author': {
+        'name': 'Alan Trefler',
+        'title': 'Pegasystems Founder &amp; CEO'
+      },
+      size: 'large',
+      border: 'none',
+      content: 'We’ve gone from an idea, to a sustainable business, to a business that can really help organizations and help people globally. At the same time, I see so much more that is possible.'
+    } %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Watch Alan tell the Pega story",
+      tag: 'span',
+      size: 'xsmall',
+      url: '#!'
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_quote,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      '50/25/25@from-medium'
+    ],
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "We care about our people...",
+      tag: 'h2',
+      size: 'xxlarge',
+    } only %}
+    <p>To us #LifeAtPega means a safe, respectful work environment that supports our employees and their families. We offer highly competitive benefits and robust programs focused on:</p>
+    <ul>
+      <li>Employee wellness</li>
+      <li>Inclusion &amp; diversity</li>
+      <li>Professional growth &amp; education</li>
+    </ul>
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Work with us',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: '/images/placeholders/16x9.jpg',
+        loading: 'eager',
+        width: 800,
+        height: 450,
+        style: 'display: block;',
+      },
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      order: 'last@from-small',
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      valign_self: 'end-offset',
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      'halves@from-small'
+    ],
+    attributes: {
+      class: 't-bolt-gray-xlight'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "And give back to our communities",
+      tag: 'h2',
+      size: 'xxlarge',
+    } only %}
+    <p>From environmental sustainability to volunteering, we strive to be responsible corporate citizens and active contributors in the communities where we live and work.&nbsp;And we partner with <a href="/brand-ambassadors" data-google-analytics-et-processed="true">brand ambassadors</a> who share our values.</p>
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Find out more',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: '/images/placeholders/16x9.jpg',
+        loading: 'eager',
+        width: 800,
+        height: 450,
+      },
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      'halves@from-small'
+    ],
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Get to know us better",
+      tag: 'h2',
+      size: 'xlarge',
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_actions %}
+    {% set layer_icon %}
+      {% include '@bolt-elements-icon/icon.twig' with {
+        name: 'download',
+        size: 'large'
+      } %}
+    {% endset %}
+
+    {% include '@bolt-components-action-blocks/action-blocks.twig' with {
+      items: [
+        {
+          text: 'Action Item',
+          url: '#!',
+          media: layer_icon,
+        },
+        {
+          text: 'Action Item',
+          url: '#!',
+          media: layer_icon,
+        },
+        {
+          text: 'Action Item',
+          url: '#!',
+          media: layer_icon,
+        },
+        {
+          text: 'Action Item',
+          url: '#!',
+          media: layer_icon,
+        },
+        {
+          text: 'Action Item',
+          url: '#!',
+          media: layer_icon,
+        },
+        {
+          text: 'Action Item',
+          url: '#!',
+          media: layer_icon,
+        },
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layout_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_actions,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layout_items,
+    top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-gray-xlight'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Ready to connect?",
+      tag: 'h2',
+      size: 'xxlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_button %}
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Contact our sales team',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_button,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 'u-bolt-text-align-center',
+    }
+  } only %}
+{# END LAYER #}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-2-insights.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-2-insights.twig
new file mode 100644
index 0000000000..0d20296827
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-2-insights.twig
@@ -0,0 +1,339 @@
+{# START LAYER #}
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        alt: 'Image alt text',
+        src: '/images/placeholders/16x9.jpg',
+        loading: 'eager',
+        width: 800,
+        height: 450,
+      },
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Meet Pega: What we do & why we’re different",
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+
+    {% set list_share %}
+      {% include '@bolt-components-share/share.twig' with {
+        size: 'small',
+        sources: [
+          {
+            name: 'facebook',
+            attributes: {
+              href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse'
+            }
+          },
+          {
+            name: 'twitter',
+            attributes: {
+              href:  'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
+            }
+          },
+          {
+            name: 'linkedin',
+            attributes: {
+              href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
+            }
+          },
+          {
+            name: 'email',
+            attributes: {
+              href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
+            }
+          }
+        ],
+        copy_to_clipboard: {
+          text_to_copy: 'https://boltdesignsystem.com'
+        },
+      } only %}
+    {% endset %}
+
+    {% set list_button %}
+      {% include '@bolt-elements-button/button.twig' with {
+        content: 'Log in to subscribe to the Blog',
+        size: 'xsmall',
+        hierarchy: 'secondary',
+        attributes: {
+          href: '#!',
+        }
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-components-list/list.twig' with {
+      display: 'inline',
+      separator: 'solid',
+      items: [
+        'Molly Sullivan',
+        list_share,
+        list_button,
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      '33/67@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-navy-dark',
+    },
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    <p>Okay, so you’re reading this blog from Pega. But do you really know who we are?</p>
+    <p>Put simply, we crush the complexity that stands in the way of your success.</p>
+    <p>For organizations like yours, doing business today is incredibly complicated. Constant change, fragmented systems, inefficient workflows, siloed departments, demanding customers, and a global pandemic that has rocked us all to our core. And it’s not getting any simpler. Pega’s <a href="/why-pega">innovative software</a> makes transforming your business and serving your customers easier, faster, and more effective – today and tomorrow.</p>
+    <h3 class="u-bolt-text-transform-none c-bolt-headline--left c-bolt-headline c-bolt-headline--bold c-bolt-headline--large">What does Pega do?</h3>
+    <p><strong>We deliver three different outcomes for our clients: <a href="/solutions/customer-lifetime-value">personalized customer engagement</a>, <a href="/solutions/customer-service">simplified service</a>, and <a href="/solutions/intelligent-automation">intelligent automation</a></strong>. Together, our solutions help companies make better decisions and get work done. We save organizations and people time so they can focus on what matters most – reducing costs and increasing revenue, making personal connections with their customers, finding more meaning in their work, collaborating, innovating, and propelling their businesses into the future.</p>
+    <p>[...]</p>
+  {% endset %}
+
+  {% set layer_item %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_item,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    align_items: 'center',
+    template: [
+      '67',
+    ],
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_teaser %}
+    {% set video_thumbnail %}
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            alt: 'Image alt text',
+            src: '/images/placeholders/16x9.jpg',
+            loading: 'eager',
+            width: 800,
+            height: 450,
+          },
+        } only %}
+      {% endset %}
+      {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
+        content: image,
+        video: {
+          title: 'This is a Video Title',
+          duration: '4:26',
+        }
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-components-teaser/teaser.twig' with {
+      signifier: video_thumbnail,
+      variant: 'card',
+      eyebrow_text: 'Explainer',
+      headline: {
+        text: 'Center-out Explained',
+        link_attributes: {
+          type: 'button',
+          'data-bolt-modal-target': '#' ~ '0000',
+          class: 'u-bolt-padding-bottom-medium',
+        },
+      },
+    } %}
+  {% endset %}
+
+  {% set layer_list %}
+    {% set flag_icon %}
+      {% include '@bolt-elements-icon/icon.twig' with {
+        name: 'media',
+        size: 'xlarge',
+      } only %}
+    {% endset %}
+
+    {% set flag_text %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "Download our whitepaper, “Why real-time decisioning really matters”",
+        tag: 'h3',
+        size: 'large',
+        url: '#!',
+      } only %}
+    {% endset %}
+
+    {% set flag_content %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: flag_icon,
+      } only %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: flag_text,
+      } only %}
+    {% endset %}
+
+    {% set flag_list_item %}
+      {% include '@bolt-layouts-layout/layout.twig' with {
+        content: flag_content,
+        padding_top: 'none',
+        padding_bottom: 'none',
+        valign_items: 'center',
+        template: [
+          'flag@from-medium',
+        ],
+        attributes: {
+          style :'--l-bolt-layout-flag-media-width: 40px'
+        }
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-components-list/list.twig' with {
+      separator: 'solid',
+      spacing: 'small',
+      items: [
+        flag_list_item,
+        flag_list_item,
+        flag_list_item,
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_teaser,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_teaser,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_list,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    align_items: 'center',
+    template: [
+      'thirds@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-dark',
+    },
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% set layer_content %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "Tags",
+        tag: 'h3',
+        size: 'xlarge',
+      } only %}
+
+      {% include '@bolt-components-chip-list/chip-list.twig' with {
+        items: [
+          {
+            text: 'Chip 1',
+          },
+          {
+            text: 'Chip 2',
+          },
+          {
+            text: 'Chip 3',
+          }
+        ]
+      } only %}
+
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "About the Author",
+        tag: 'h3',
+        size: 'xlarge',
+      } only %}
+
+      <p>As Head of Brand, Creative, and Content Marketing at Pega, <a href="#!">Molly Sullivan</a> helps tell Pega’s story of crushing complexity.</p>
+
+      {% include '@bolt-components-share/share.twig' with {
+        size: 'medium',
+        sources: [
+          {
+            name: 'facebook',
+            attributes: {
+              href: 'https://www.facebook.com/sharer/sharer.php?u=https://boltdesignsystem.com&amp;src=sdkpreparse'
+            }
+          },
+          {
+            name: 'twitter',
+            attributes: {
+              href:  'https://twitter.com/intent/tweet?url=https://boltdesignsystem.com&text=Sample%20Share%20Text&via=pega&hashtags=boltDesignSystemRocks!'
+            }
+          },
+          {
+            name: 'linkedin',
+            attributes: {
+              href: 'https://www.linkedin.com/shareArticle?url=https://boltdesignsystem.com'
+            }
+          },
+          {
+            name: 'email',
+            attributes: {
+              href: 'mailto:?&body=Sample%20Text%20--%20https%3A//boltdesignsystem.com'
+            }
+          }
+        ],
+        copy_to_clipboard: {
+          text_to_copy: 'https://boltdesignsystem.com'
+        },
+      } only %}
+    {% endset %}
+
+    {% set layer_item %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: layer_content,
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_item,
+      padding_top: 'large',
+      padding_bottom: 'large',
+    } only %}
+  {% endset %}
+
+  {% set layout_item %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      attributes: {
+        class: 't-bolt-light u-bolt-padding-right-large u-bolt-padding-left-large',
+      },
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layout_item,
+    align_items: 'center',
+    padding_top: 'none',
+    padding_bottom: 'large',
+    template: [
+      '67@from-medium',
+    ],
+  } only %}
+{# END LAYER #}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-3-resources.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-3-resources.twig
new file mode 100644
index 0000000000..d97fe163fc
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-3-resources.twig
@@ -0,0 +1,534 @@
+{% set icon_download_pdf %}
+  {% include '@bolt-elements-icon/icon.twig' with {
+    name: 'pega-download-pdf',
+    size: 'medium'
+  } only %}
+{% endset %}
+
+{% set form %}
+  {% set children %}
+    {% set label %}
+      {% include '@bolt-components-form/form-label.twig' with {
+        title: 'Email',
+        displayType: 'floating',
+        attributes: {
+          for: 'email-address',
+        },
+      } only %}
+    {% endset %}
+    {% set input %}
+      {% include '@bolt-components-form/form-input.twig' with {
+        attributes: {
+          placeholder: 'Enter your email address',
+          required: true,
+          type: 'email',
+          id: 'email-address',
+        },
+      } only %}
+    {% endset %}
+    {% include '@bolt-components-form/form-element.twig' with {
+      label: label,
+      children: input,
+    } only %}
+
+    {% set label %}
+      {% include '@bolt-components-form/form-label.twig' with {
+        title: 'Country',
+        displayType: 'floating',
+        attributes: {
+          for: 'country',
+        },
+      } only %}
+    {% endset %}
+    {% set input %}
+      {% include '@bolt-components-form/form-select.twig' with {
+        options: [
+          {
+            type: 'option',
+            value: '',
+            label: 'Select a Country',
+            attributes: {
+              disabled: true,
+            },
+          },
+          {
+            type: 'option',
+            value: 'a',
+            label: 'Argentina'
+          },
+          {
+            type: 'option',
+            value: 'b',
+            label: 'Belgium'
+          },
+          {
+            type: 'option',
+            value: 'c',
+            label: 'Croatia'
+          }
+        ],
+        attributes: {
+          required: true,
+          id: 'country',
+        },
+      } only %}
+    {% endset %}
+    {% include '@bolt-components-form/form-element.twig' with {
+      label: label,
+      children: input,
+    } only %}
+
+    {% set label %}
+      {% include '@bolt-components-form/form-label.twig' with {
+        title: 'Receive periodic emails on key analyst reports, Pega events, and important news.  You can unsubscribe at any time',
+        displayType: 'inline-checkbox',
+        attributes: {
+          for: 'newsletter',
+        },
+      } only %}
+    {% endset %}
+    {% set input %}
+      {% include '@bolt-components-form/form-input.twig' with {
+        attributes: {
+          required: true,
+          type: 'checkbox',
+          id: 'newsletter',
+        },
+      } only %}
+    {% endset %}
+    {% include '@bolt-components-form/form-element.twig' with {
+      labelDisplay: 'after',
+      label: label,
+      children: input,
+    } only %}
+
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Download the report',
+      display: 'block',
+      icon_before: icon_download_pdf,
+      attributes: {
+        type: 'button',
+      },
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-components-headline/headline.twig' with {
+    text: 'Get the Report',
+    size: 'xlarge'
+  } only %}
+
+  {% include '@bolt-components-headline/text.twig' with {
+    text: '(all fields are required)',
+    size: 'small'
+  } only %}
+
+  {% include '@bolt-components-form/form.twig' with {
+    children: children
+  } only %}
+{% endset %}
+
+{% set header %}
+  <header>
+    {% set logo %}
+      <a href="https://google.com">
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            alt: 'Pegasystems, Inc.',
+            src: '/images/logos/pega-logo.svg',
+            width: 139,
+            height: 30,
+            class: 'c-base-ocpl-logo',
+          },
+        } only %}
+      </a>
+    {% endset %}
+    {% set layout_content %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: logo,
+      } only %}
+    {% endset %}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layout_content,
+    } only %}
+  </header>
+{% endset %}
+
+{% set main_content %}
+  {% set page_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: 'This is a headline',
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+
+    {% set text_content %}
+      {% include '@bolt-components-headline/text.twig' with {
+        text: 'This is the body. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis numquam quidem vitae minus deserunt, qui libero autem, modi dolorem cum nisi asperiores beatae error hic architecto nobis saepe, maiores eligendi.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quam ipsum commodi accusantium eligendi, soluta, unde incidunt omnis officiis eos aut quae culpa laudantium consequatur! Quasi repellat odit doloremque rerum.',
+      } only %}
+      {% include '@bolt-components-headline/text.twig' with {
+        text: 'Veritatis numquam quidem vitae minus deserunt, qui libero autem, modi dolorem cum nisi asperiores beatae error hic architecto nobis saepe, maiores eligendi. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iure quam ipsum commodi accusantium eligendi, soluta.',
+      } only %}
+    {% endset %}
+
+    {% set carousel_and_list %}
+      {% set layout_content %}
+        {% set carousel %}
+          {% set slide %}
+            <div class="c-base-ocpl-image-preview">
+              {% include '@bolt-elements-image/image.twig' with {
+                fill: true,
+                attributes: {
+                  alt: 'Alt text.',
+                  src: 'https://via.placeholder.com/400x225',
+                  width: 400,
+                  height: 225,
+                  loading: 'lazy',
+                },
+              } only %}
+              <div class="c-base-ocpl-image-preview__chip">
+                {% include '@bolt-components-chip/chip.twig' with {
+                  text: 'Preview',
+                  border_radius: 'small',
+                  color: 'violet',
+                } only %}
+              </div>
+            </div>
+          {% endset %}
+          {% include '@bolt-components-carousel/carousel.twig' with {
+            slides: [
+              slide,
+              slide,
+              slide,
+              slide,
+              slide,
+            ],
+            nav_button_position: 'outside',
+          } only %}
+        {% endset %}
+        {% set list %}
+          {% set list_content %}
+            {% set icon_check_solid %}
+              {% include '@bolt-elements-icon/icon.twig' with {
+                name: 'check-solid',
+                size: 'medium',
+                color: 'teal',
+              } only %}
+            {% endset %}
+            {% set list_text %}
+              {% include '@bolt-components-headline/text.twig' with {
+                text: 'Check list item. Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+                size: 'small',
+                attributes: {
+                  class: 'u-bolt-margin-top-xxsmall',
+                }
+              } only %}
+            {% endset %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: icon_check_solid,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: list_text,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: icon_check_solid,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: list_text,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: icon_check_solid,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: list_text,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: icon_check_solid,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: list_text,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: icon_check_solid,
+            } only %}
+            {% include '@bolt-layouts-layout/layout-item.twig' with {
+              content: list_text,
+            } only %}
+          {% endset %}
+          {% include '@bolt-layouts-layout/layout.twig' with {
+            content: list_content,
+            gutter: 'small',
+            row_gutter: 'small',
+            template: [
+              'flag',
+            ],
+            attributes: {
+              style: '--l-bolt-layout-flag-media-width: 1.5rem',
+            },
+          } only %}
+        {% endset %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: carousel,
+        } only %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: list,
+        } only %}
+      {% endset %}
+      {% include '@bolt-layouts-layout/layout.twig' with {
+        content: layout_content,
+        gutter: 'large',
+        padding_top: 'small',
+        padding_bottom: 'small',
+        template: [
+          'tiles@from-medium',
+        ],
+        attributes: {
+          style: '--l-bolt-layout-tile-min-width: 300px',
+        }
+      } only %}
+    {% endset %}
+
+    {% set layout_content %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: carousel_and_list,
+      } only %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: text_content,
+        order: 'first@from-medium',
+      } only %}
+    {% endset %}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layout_content,
+    } only %}
+  {% endset %}
+  {% set form_content %}
+    <div class="c-base-ocpl-form t-bolt-white">
+      {{ form }}
+    </div>
+  {% endset %}
+  {% set layout_content %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: page_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: form_content,
+    } only %}
+  {% endset %}
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layout_content,
+    gutter: 'xlarge',
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      '67/33@from-medium',
+    ],
+  } only %}
+{% endset %}
+
+{% set footer %}
+  <footer>
+    {% set suggested_content %}
+      {% set icon_documentation %}
+        {% include '@bolt-elements-icon/icon.twig' with {
+          name: 'documentation',
+        } only %}
+      {% endset %}
+      {% set shape_documentation %}
+        {% include '@bolt-elements-shape/shape.twig' with {
+          content: icon_documentation,
+          size: 'large',
+          attributes: {
+            class: 't-bolt-teal',
+          }
+        } only %}
+      {% endset %}
+      {% set eyebrow %}
+        {% include '@bolt-components-headline/eyebrow.twig' with {
+          text: 'Eyebrow',
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: 'Suggested Content',
+        tag: 'h2',
+        size: 'xlarge',
+      } only %}
+      {% include '@bolt-components-listing-teaser/listing-teaser.twig' with {
+        layout: 'responsive',
+        gutter: 'medium',
+        signifier: shape_documentation,
+        eyebrow_items: [
+          eyebrow,
+        ],
+        headline: {
+          text: 'This is a listing teaser',
+          tag: 'h3',
+          size: 'xlarge',
+          link_attributes: {
+            href: 'https://google.com'
+          },
+        },
+        description: 'This is the description. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
+      } only %}
+    {% endset %}
+    {% set layout_content %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: suggested_content,
+      } only %}
+    {% endset %}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layout_content,
+      padding_top: 'large',
+      padding_bottom: 'large',
+      template: [
+        '67@from-medium',
+      ],
+      attributes: {
+        class: 't-bolt-white',
+      },
+    } only %}
+
+    <div class="c-base-ocpl-footer c-base-ocpl-footer--offset-bottom-cta t-bolt-white">
+      <div class="c-base-ocpl-footer__item">
+        <strong class="u-bolt-margin-right-xsmall">Connect with us</strong>
+
+        {% set icon_linkedin %}
+          {% include '@bolt-elements-icon/icon.twig' with {
+            name: 'linkedin',
+          } only %}
+        {% endset %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: '<span class="u-bolt-visuallyhidden">LinkedIn</span>',
+          icon_before: icon_linkedin,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+
+        {% set icon_twitter %}
+          {% include '@bolt-elements-icon/icon.twig' with {
+            name: 'twitter',
+          } only %}
+        {% endset %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: '<span class="u-bolt-visuallyhidden">Twitter</span>',
+          icon_before: icon_twitter,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+
+        {% set icon_facebook %}
+          {% include '@bolt-elements-icon/icon.twig' with {
+            name: 'facebook',
+          } only %}
+        {% endset %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: '<span class="u-bolt-visuallyhidden">Facebook</span>',
+          icon_before: icon_facebook,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+
+        {% set icon_youtube %}
+          {% include '@bolt-elements-icon/icon.twig' with {
+            name: 'youtube-solid',
+          } only %}
+        {% endset %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: '<span class="u-bolt-visuallyhidden">YouTube</span>',
+          icon_before: icon_youtube,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+      </div>
+      <div class="c-base-ocpl-footer__item">
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: 'Terms of Use',
+          reversed_underline: true,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: 'Privacy',
+          reversed_underline: true,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: 'Contact',
+          reversed_underline: true,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: 'Cookie Preference',
+          reversed_underline: true,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: 'google.com',
+          reversed_underline: true,
+          attributes: {
+            href: 'https://google.com',
+          }
+        } only %}
+      </div>
+      <div class="c-base-ocpl-footer__item">
+        &copy;2021 Pegasystems, Inc.
+      </div>
+    </div>
+  </footer>
+{% endset %}
+
+{% include '@bolt-elements-image/image.twig' with {
+  background: true,
+  attributes: {
+    src: '/images/backgrounds/ocpl-bg-1.svg',
+    alt: '',
+    style: '--e-bolt-image-position: 65vw -34vw',
+    class: 'c-base-ocpl-bg-image',
+  },
+} only %}
+
+{% include '@bolt-layouts-site/site.twig' with {
+  header: header,
+  main: {
+    content: main_content,
+  },
+  footer: footer,
+  attributes: {
+    class: 't-bolt-gray-xlight',
+  }
+} only %}
+
+<div class="c-base-ocpl-form-trigger t-bolt-teal">
+  {% include '@bolt-elements-button/button.twig' with {
+    content: 'Download the report',
+    display: 'block',
+    hierarchy: 'secondary',
+    icon_before: icon_download_pdf,
+    attributes: {
+      type: 'button',
+      'data-bolt-modal-target': '#js-bolt-modal-form',
+    },
+  } only %}
+</div>
+
+<div class="c-base-ocpl-form-modal">
+  {% set modal_content %}
+    {{ form }}
+  {% endset %}
+  {% include '@bolt-components-modal/modal.twig' with {
+    content: modal_content,
+    attributes: {
+      id: 'js-bolt-modal-form',
+    }
+  } only %}
+</div>
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-4-careers.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-4-careers.twig
new file mode 100644
index 0000000000..25d9b7aa11
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-4-careers.twig
@@ -0,0 +1,350 @@
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Are you up for the challenge?",
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Join us as we help the world’s biggest brands simplify how they do business.",
+      tag: 'h2',
+      size: 'large',
+      weight: 'regular',
+    } only %}
+  {% endset %}
+
+  {% set layer_form %}
+    [form card]
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_form,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'xlarge',
+    padding_bottom: 'xlarge',
+    align_items: 'center',
+    template: [
+      '75@from-small',
+      '67@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-dark'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Explore #LifeAtPega",
+      tag: 'h3',
+      size: 'xxlarge',
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_cards %}
+    {% set layer_teaser %}
+      {% set card_thumbnail %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            src: '/images/content/best-of-content/signifier-person.jpg',
+            alt: 'Image alt text',
+          }
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-components-teaser/teaser.twig' with {
+        signifier: card_thumbnail,
+        variant: 'card',
+        headline: {
+          text: 'Culture & benefits',
+          link_attributes: {
+            href: '#!',
+            target: '_blank',
+            rel: 'noopener'
+          },
+        },
+        description: {
+          content: "We're caring, collaborative, and committed to balancing work with well-being.",
+        }
+      } %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_teaser,
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      align_items: 'center',
+      template: [
+        'thirds@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_cards,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    align_items: 'center',
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Explore #LifeAtPega",
+      tag: 'h3',
+      size: 'xxlarge',
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_cards %}
+    {% set layer_teaser %}
+      {% set card_thumbnail %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            src: '/images/content/best-of-content/signifier-pdf-640.jpg',
+            alt: 'Image alt text',
+          }
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-components-teaser/teaser.twig' with {
+        signifier: card_thumbnail,
+        headline: {
+          text: 'Sales',
+          link_attributes: {
+            href: '#!',
+            target: '_blank',
+            rel: 'noopener'
+          },
+        },
+        description: {
+          content: "We don't follow the same old tactics. We're rewriting the sales playbook and closing epic deals along the way.",
+        }
+      } %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..6 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_teaser,
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      template: [
+        'thirds@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_cards,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    align_items: 'center',
+    attributes: {
+      class: 't-bolt-gray-xlight'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% set layer_links %}
+      {% set icon_chevron_right %}
+        {% include '@bolt-elements-icon/icon.twig' with {
+          name: 'chevron-right',
+        } only %}
+      {% endset %}
+      {% set link %}
+        {% include '@bolt-elements-text-link/text-link.twig' with {
+          content: 'United States',
+          icon_after: icon_chevron_right,
+          attributes: {
+            href: '#!',
+          }
+        } only %}
+      {% endset %}
+      {% for i in 1..9 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: link,
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Explore Pega near you",
+      tag: 'h3',
+      size: 'xxlarge',
+    } only %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_links,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      template: [
+        'thirds@from-small',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/heroes/foreground-go-graphic-640.png',
+        alt: 'Image alt text',
+        width: 300,
+        height: 300,
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    valign_items: 'center',
+    template: [
+      'halves@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-dark'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Join the team",
+      tag: 'h3',
+      size: 'xlarge',
+    } only %}
+
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Search job listings',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_share %}
+    {% set icon %}
+      {% include '@bolt-elements-icon/icon.twig' with {
+        name: 'star-solid',
+        size: 'large'
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Connect on social",
+      tag: 'h3',
+      size: 'xlarge',
+    } only %}
+
+    {% include '@bolt-components-list/list.twig' with {
+      display: 'inline',
+      spacing: 'medium',
+      align: 'center',
+      valign: 'center',
+      items: [
+        icon,
+        icon,
+        icon,
+        icon
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_share,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      'halves@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-gray-xlight'
+    }
+  } only %}
+{# END LAYER #}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-5-customers.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-5-customers.twig
new file mode 100644
index 0000000000..afbac0d995
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-5-customers.twig
@@ -0,0 +1,248 @@
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/eyebrow.twig' with {
+      text: "Case Study",
+      tag: 'p',
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Commonwealth Bank of Australia: Exceeding customer expectations with personalized conversations",
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% set video %}
+      <video-js
+        data-account="1900410236"
+        data-player="O3FkeBiaDz"
+        data-embed="default"
+        data-video-id="6236693947001"
+        data-media-duration
+        data-media-title
+        controls
+        class="c-base-video"></video-js>
+    {% endset %}
+    {% include '@bolt-elements-ratio/ratio.twig' with {
+      content: video,
+      ratio: 'wide'
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'medium',
+    valign_items: 'center',
+    template: [
+      'halves@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-dark'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_flag %}
+    {% set flag_icon %}
+      {% include '@bolt-elements-icon/icon.twig' with {
+        name: 'check',
+        size: 'xlarge'
+      } only %}
+    {% endset %}
+    {% set flag_text %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "Connected conversations across 18 channels",
+        tag: 'h3',
+        size: 'large',
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: flag_icon,
+      } only %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: flag_text,
+      } only %}
+    {% endset %}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'medium',
+      padding_bottom: 'medium',
+      template: [
+        'flag',
+      ],
+      attributes: {
+        style: '--l-bolt-layout-flag-media-width: 1.5rem',
+      },
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% for i in 1..3 %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: layer_flag,
+      } only %}
+    {% endfor %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'none',
+    padding_bottom: 'large',
+    template: [
+      'thirds@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-dark'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_items %}
+    {% set column_content %}
+      {% include '@bolt-components-blockquote/blockquote.twig' with {
+        'author': {
+          'name': 'Michelangelo di Lodovico Buonarroti Simoni',
+          'title': 'Renaissance Artist'
+        },
+        'content': '<p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p>'
+      } %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "The Business Issue",
+        tag: 'h3',
+        size: 'large',
+      } only %}
+      <p>Commonwealth Bank of Australia (CBA) is the largest organization in Australia by market cap, and one out of three Australians call CBA their main financial institution. To continue driving its market dominance, CBA looked to build deeper, more personalized relationships with each of its 10 million customers.</p>
+    {% endset %}
+
+    {% set column_related %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "Related Resources",
+        tag: 'h3',
+        size: 'xlarge',
+      } only %}
+
+      {% set layer_flag %}
+        {% set flag_icon %}
+          {% include '@bolt-elements-icon/icon.twig' with {
+            name: 'video',
+            size: 'xlarge'
+          } only %}
+        {% endset %}
+        {% set flag_text %}
+          {% include '@bolt-components-headline/headline.twig' with {
+            text: "PegaWorld Video",
+            tag: 'h3',
+            size: 'large',
+            url: '#!'
+          } only %}
+          <p>Learn more about how CBA uses AI to drive Next Best Conversations.</p>
+        {% endset %}
+
+        {% set layer_items %}
+          {% include '@bolt-layouts-layout/layout-item.twig' with {
+            content: flag_icon,
+          } only %}
+          {% include '@bolt-layouts-layout/layout-item.twig' with {
+            content: flag_text,
+          } only %}
+        {% endset %}
+        {% include '@bolt-layouts-layout/layout.twig' with {
+          content: layer_items,
+          padding_top: 'none',
+          padding_bottom: 'none',
+          template: [
+            'flag',
+          ],
+          attributes: {
+            style: '--l-bolt-layout-flag-media-width: 1.5rem',
+          },
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-components-list/list.twig' with {
+        separator: 'solid',
+        spacing: 'small',
+        items: [
+          layer_flag,
+          layer_flag,
+        ]
+      } only %}
+
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: column_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: column_related,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    template: [
+      '67/33@from-medium',
+    ],
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% set icon %}
+      {% include '@bolt-elements-icon/icon.twig' with {
+        name: 'energy',
+        size: 'large'
+      } only %}
+    {% endset %}
+    {% include '@bolt-elements-shape/shape.twig' with {
+      content: icon,
+      size: 'xlarge',
+      attributes: {
+        class: 't-bolt-teal',
+      }
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Pega Customer Decision Hub",
+      tag: 'h3',
+      size: 'xxlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    align_items: 'center',
+    template: [
+      '67@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-dark'
+    }
+  } only %}
+{# END LAYER #}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-6-homepage.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-6-homepage.twig
new file mode 100644
index 0000000000..d0ca92a6ed
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-6-homepage.twig
@@ -0,0 +1,547 @@
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Build for whatever <br />comes next — right now",
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Our low-code platform frees the world's <br />leading organizations to adapt to change.",
+      tag: 'div',
+      size: 'large',
+      weight: 'regular',
+    } only %}
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Explore the platform',
+      attributes: {
+        type: 'submit'
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'xlarge',
+    padding_bottom: 'xlarge',
+    align_items: 'center',
+    template: [
+      '50@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-light',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% set layer_content %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "Learn how Pega’s low code platform for AI-powered decisioning and workflow automation lets you:",
+        tag: 'h3',
+        size: 'xxlarge',
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: layer_content,
+        attributes: {
+          class: 'u-bolt-text-align-center',
+        }
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      align_items: 'center',
+      template: [
+        '75@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_thirds %}
+    {% set layer_content %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          alt: 'Image alt text',
+          src: '/images/content/icons/badge-pw.png',
+          width: 150,
+        },
+      } only %}
+
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: "Maximize value",
+        tag: 'h3',
+        size: 'xlarge',
+        url: '#!'
+      } only %}
+      {% include '@bolt-components-headline/subheadline.twig' with {
+        text: "Handle anything, fast, with automation and AI.",
+        tag: 'div',
+        size: 'large',
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_content,
+          attributes: {
+            class: 'u-bolt-text-align-center',
+          }
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      align_items: 'center',
+      template: [
+        'thirds@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_thirds,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'xlarge',
+    padding_bottom: 'xlarge',
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "The best of Pega, curated for you",
+      tag: 'h3',
+      size: 'xxlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% set layout_card %}
+      {% include '@bolt-components-headline/subheadline.twig' with {
+        text: "Recommended for you",
+        tag: 'h3',
+        size: 'xlarge',
+      } only %}
+
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            src: '/images/placeholders/16x9-1024.jpg',
+            alt: 'Image alt text',
+          }
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-components-teaser/teaser.twig' with {
+        variant: 'card',
+        signifier: image,
+        eyebrow_text: 'EBook',
+        headline: {
+          text: 'Ready to bring AI to your business?',
+          link_attributes: {
+            href: '#!',
+            target: '_blank',
+            rel: 'noopener'
+          }
+        },
+        description: {
+          content: 'How businesses are turning insights into action',
+        },
+        attributes: {
+          class: 't-bolt-white',
+        }
+      } only %}
+    {% endset %}
+
+    {% set layout_flags %}
+      {% include '@bolt-components-headline/subheadline.twig' with {
+        text: "Trending now",
+        tag: 'h3',
+        size: 'xlarge',
+      } only %}
+
+      {% set flag_image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            src: '/images/placeholders/square.jpg',
+            alt: 'Image alt text',
+          }
+        } only %}
+      {% endset %}
+
+      {% set flag_content %}
+        {% include '@bolt-components-headline/headline.twig' with {
+          text: "AI is now for everyone with Pega Infinity 8.8",
+          tag: 'h4',
+          size: 'large',
+          url: '#!'
+        } only %}
+        <p class="c-bolt-text c-bolt-text--regular c-bolt-text--normal c-bolt-text--medium u-bolt-margin-bottom-small">Build and manage better workflows and more valuable interactions with enterprise-grade intelligence.</p>
+        {% include '@bolt-components-chip-list/chip-list.twig' with {
+          items: [
+            {
+              text: 'platform',
+              url: '#!'
+            }
+          ]
+        } only %}
+      {% endset %}
+
+      {% set layer_items %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: flag_image,
+        } only %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: flag_content,
+        } only %}
+      {% endset %}
+
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout.twig' with {
+          content: layer_items,
+          padding_top: 'none',
+          padding_bottom: 'medium',
+          template: [
+            'flag',
+          ],
+          attributes: {
+            style :'--l-bolt-layout-flag-media-width: 120px'
+          }
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: layout_card,
+      } only %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: layout_flags,
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      gutter: 'large',
+      template: [
+        '33/67@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_button %}
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Browse our collection',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_button,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-teal',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/square.jpg',
+        alt: 'Image alt text',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% include '@bolt-components-headline/eyebrow.twig' with {
+      text: "featured success story",
+      tag: 'p',
+      attributes: {
+        class: 'u-bolt-margin-bottom-medium'
+      }
+    } only %}
+
+    {% include '@bolt-components-blockquote/blockquote.twig' with {
+      border: 'none',
+      author: {
+        name: 'Michelangelo di Lodovico Buonarroti Simoni',
+        title: 'Renaissance Artist'
+      },
+      content: '<p>The greater danger for most of us lies not in setting our aim too high and falling short; but in setting our aim too low, and achieving our mark.</p>'
+    } %}
+
+      {% include '@bolt-components-list/list.twig' with {
+        display: 'inline',
+        spacing: 'xsmall',
+        separator: 'solid',
+        items: [
+          'Client Success',
+          '03:37',
+        ]
+      } only %}
+
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Watch video',
+      attributes: {
+        type: 'submit'
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'xlarge',
+    padding_bottom: 'large',
+    valign_items: 'center',
+    gutter: 'large',
+    template: [
+      '33/67@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-light',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Meet our industry-leading clients",
+      tag: 'h3',
+      size: 'xlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_tiles %}
+    {% set layer_tile %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          src: '/images/content/logos/logo-atos.png',
+          alt: 'Image alt text',
+        },
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..5 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_tile,
+          attributes: {
+            class: 'u-bolt-text-align-center',
+          }
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      valign_items: 'center',
+      gutter: 'large',
+      template: [
+        'tiles@from-medium',
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_tiles,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'none',
+    padding_bottom: 'xlarge',
+    attributes: {
+      class: 't-bolt-light',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Built for speed and scale",
+      tag: 'h3',
+      size: 'xxlarge',
+    } only %}
+    {% include '@bolt-components-headline/subheadline.twig' with {
+      text: "Pega simplifies your technology from the center out, one customer journey at a time.",
+      tag: 'div',
+      size: 'xlarge',
+    } only %}
+      {% include '@bolt-elements-button/button.twig' with {
+      content: 'How our software works',
+      attributes: {
+        type: 'submit'
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/content/heroes/foreground-person.png',
+        alt: 'Image alt text',
+        style: 'display: block;',
+        width: 250,
+      },
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      valign_self: 'end-offset',
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'xlarge',
+    padding_bottom: 'xlarge',
+    valign_items: 'center',
+    template: [
+      'halves@from-medium',
+    ]
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Ready to connect?",
+      tag: 'h3',
+      size: 'xxlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% set icon %}
+      {% include '@bolt-elements-icon/icon.twig' with {
+        name: 'check',
+        size: 'xlarge',
+      }%}
+    {% endset %}
+    {% include '@bolt-components-action-blocks/action-blocks.twig' with {
+      items: [
+        {
+          text: 'Item 1',
+          url: '#!',
+          media: icon,
+        },
+        {
+          text: 'Item 2',
+          url: '#!',
+          media: icon,
+        },
+        {
+          text: 'Item 3',
+          url: '#!',
+          media: icon,
+        }
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'xlarge',
+    padding_bottom: 'xlarge',
+    attributes: {
+      class: 't-bolt-dark',
+    }
+  } only %}
+{# END LAYER #}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-7-industries.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-7-industries.twig
new file mode 100644
index 0000000000..8a5e03c31a
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-7-industries.twig
@@ -0,0 +1,385 @@
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Simpler operations. Scalable solutions. Satisfied customers.",
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+    {% include '@bolt-components-headline/subheadline.twig' with {
+      text: "Discover low-code financial services software built to simplify banking’s most complex processes.",
+      tag: 'h2',
+      size: 'large',
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Find solutions built for you:",
+      tag: 'h3',
+      size: 'xlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_cards %}
+    {% set layer_card %}
+      {% include '@bolt-components-teaser/teaser.twig' with {
+        headline: {
+          text: 'Some awesome Title',
+          size: 'xxlarge',
+          link_attributes: {
+            href: '#!',
+          }
+        },
+        description: {
+          content: 'Streamline lending and reduce time to close for a more simplified digital customer experience.',
+        },
+        variant: 'card',
+        attributes: {
+          class: 't-bolt-white',
+        }
+      } %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_card,
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {# 3 CARD ROW #}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'medium',
+      padding_bottom: 'medium',
+      valign_items: 'center',
+      gutter: 'large',
+      template: [
+        'thirds@from-medium',
+      ],
+    } only %}
+
+    {% set layer_cards %}
+      {% set layer_items %}
+        {% for i in 1..2 %}
+          {% include '@bolt-layouts-layout/layout-item.twig' with {
+            content: layer_card,
+          } only %}
+        {% endfor %}
+      {% endset %}
+
+      {# 2 CARD ROW #}
+      {% include '@bolt-layouts-layout/layout.twig' with {
+        content: layer_items,
+        padding_top: 'none',
+        padding_bottom: 'none',
+        valign_items: 'center',
+        gutter: 'large',
+        template: [
+          'halves@from-medium',
+        ],
+      } only %}
+    {% endset %}
+
+    {% set layer_item %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: layer_cards,
+      } only %}
+    {% endset %}
+
+    {# 3 CARD ROW WRAPPER #}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_item,
+      padding_top: 'none',
+      padding_bottom: 'large',
+      align_items: 'center',
+      gutter: 'large',
+      template: [
+        '67@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_cards,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-navy-light',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/eyebrow.twig' with {
+      text: "Spotlight On",
+      tag: 'p',
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Chartis RiskTech Quadrant® for KYC Solutions 2022",
+      tag: 'span',
+      size: 'xxlarge',
+    } only %}
+    <p>In the report, Chartis evaluated the 32 most significant Know Your Customer (KYC) providers. Pega received the top score of all providers, with a highest possible score in three key areas: providing best-in-class capabilities across KYC customer onboarding, KYC risk scoring, and reporting and dashboarding.</p>
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Learn More',
+      hiearchy: 'secondary',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_quote %}
+    {% include '@bolt-components-blockquote/blockquote.twig' with {
+      content: '<p>Building on its historically strong market position, Pega has expanded its KYC functionality, with perpetual KYC monitoring and low-code capabilities particular differentiators.</p>',
+      size: 'xlarge',
+      border: 'none'
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_quote,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    gutter: 'large',
+    template: [
+      '67/33@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-gray-xlight',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Featured customers",
+      tag: 'h3',
+      size: 'xlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_tiles %}
+    {% set layer_tile %}
+      {% include '@bolt-elements-image/image.twig' with {
+        attributes: {
+          src: '/images/content/logos/logo-atos.png',
+          alt: 'Image alt text',
+        },
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..5 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_tile,
+          attributes: {
+            class: 'u-bolt-text-align-center',
+          }
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      valign_items: 'center',
+      template: [
+        'tiles@from-medium',
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_link %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "View all customers",
+      tag: 'span',
+      size: 'medium',
+      url: '#!'
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_tiles,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_link,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_headline %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Industry expertise",
+      tag: 'span',
+      size: 'xxlarge',
+    } only %}
+    {% include '@bolt-components-headline/subheadline.twig' with {
+      text: "Check out the latest trends and relevant innovations in financial services.",
+      tag: 'h3',
+      size: 'large',
+    } only %}
+  {% endset %}
+
+  {% set layer_cards %}
+    {% set layer_card %}
+      {% set image %}
+        {% include '@bolt-elements-image/image.twig' with {
+          attributes: {
+            src: '/images/content/thumbnail-forrester-prevcard-640.jpg',
+            alt: 'Image alt text',
+          },
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-components-teaser/teaser.twig' with {
+        signifier: image,
+        headline: {
+          text: 'The Forrester Wave: Real-Time Interaction Management, Q2 2022',
+          size: 'large',
+          link_attributes: {
+            href: '#!',
+          }
+        },
+        variant: 'card',
+        attributes: {
+          class: 't-bolt-white',
+        }
+      } %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_card,
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% set layer_content %}
+      {% include '@bolt-layouts-layout/layout.twig' with {
+        content: layer_items,
+        padding_top: 'none',
+        padding_bottom: 'none',
+        template: [
+          'thirds@from-medium',
+        ]
+      } only %}
+    {% endset %}
+
+    {% set layer_item %}
+      {% include '@bolt-layouts-layout/layout-item.twig' with {
+        content: layer_content,
+      } only %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_item,
+      padding_top: 'none',
+      padding_bottom: 'none',
+      align_items: 'center',
+      template: [
+        '67@from-medium',
+      ]
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_headline,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_cards,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-light',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Ready to connect?",
+      tag: 'h2',
+      size: 'xxlarge',
+    } only %}
+
+    {% include '@bolt-components-headline/subheadline.twig' with {
+      text: "We can’t wait to show you what’s possible with Pega.",
+      tag: 'span',
+      size: 'xlarge',
+    } only %}
+
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Request a demo',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 'u-bolt-text-align-center t-bolt-dark',
+    }
+  } only %}
+{# END LAYER #}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-8-services.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-8-services.twig
new file mode 100644
index 0000000000..d6c06f5036
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-8-services.twig
@@ -0,0 +1,140 @@
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Pega Partners",
+      tag: 'h1',
+      size: 'xxxlarge',
+    } only %}
+    {% include '@bolt-components-headline/subheadline.twig' with {
+      text: "Transforming the world’s biggest enterprises is a team effort. Our partners are here to help clients get the business outcomes they need, fast.",
+      tag: 'h2',
+      size: 'xlarge',
+    } only %}
+  {% endset %}
+
+  {% set layer_cards %}
+    {% set layer_card %}
+      {% include '@bolt-components-teaser/teaser.twig' with {
+        variant: 'card',
+        headline: {
+          text: 'Work with a Partner',
+          link_attributes: {
+            href: 'https://www.google.com',
+            target: '_blank',
+            rel: 'noopener'
+          }
+        },
+        description: {
+          content: 'Learn about Pega partners available and evaluate which one fits your unique business needs.',
+        },
+        attributes: {
+          class: 't-bolt-dark'
+        }
+      } %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_card,
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'medium',
+      padding_bottom: 'none',
+      template: [
+        'thirds@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_cards,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-dark',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/16x9-1024.jpg',
+        alt: 'Image alt text',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% include '@bolt-components-headline/eyebrow.twig' with {
+      text: 'Pega Marketplace',
+      tag: 'p',
+    } only %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Discover. Connect. Grow.",
+      tag: 'h3',
+      size: 'xxlarge',
+    } only %}
+    <p>Pega Marketplace is a curated online library for Pega applications, add-on components, and useful utilities. The Pega Marketplace provides business users and developers with access to apps and reusable components from Pegasystems, our partners, and contributions from the broader developer community.</p>
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Learn More',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'large',
+      padding_bottom: 'none',
+      valign_items: 'center',
+      template: [
+        'halves@from-small',
+      ],
+      attributes: {
+        class: 't-bolt-gray-xlight',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'large',
+      padding_bottom: 'large',
+      valign_items: 'center',
+      template: [
+        'halves@from-small',
+      ],
+      attributes: {
+        class: 't-bolt-gray-xlight',
+      }
+    } only %}
+
+{# END LAYER #}
diff --git a/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-9-pegaworld.twig b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-9-pegaworld.twig
new file mode 100644
index 0000000000..e722c8ab26
--- /dev/null
+++ b/docs-site/src/pages/pattern-lab/_patterns/30-layouts/layout/-998-layout-use-case-page-9-pegaworld.twig
@@ -0,0 +1,277 @@
+{# START LAYER #}
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/4x3.jpg',
+        alt: 'A Rock Climber',
+        loading: 'lazy',
+        width: 800,
+        height: 600,
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    <h1 class="u-bolt-margin-none" style="font-size: 2rem; text-align: left;"><span style="font-weight: 100; color: #fff;">PegaWorld</span><span style="color: #ffc936;"><strong>iN</strong></span><span style="font-weight: 400; color: #fff;">spire</span></h1>
+    <strong>June 11-13, 2023 | Las Vegas</strong>
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "Registration opens December 2022",
+      tag: 'h2',
+      size: 'xxxlarge',
+    } only %}
+    <p>Step outside the ordinary and into our world.</p>
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Save the date',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      order: 'last@from-medium',
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    valign_items: 'center',
+    template: [
+      '33/67@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-violet',
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/4x3.jpg',
+        alt: 'A Rock Climber',
+        loading: 'lazy',
+        width: 800,
+        height: 600,
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "In this world, we’re building for change",
+      tag: 'h2',
+      size: 'xlarge',
+    } only %}
+    <p>It’s time to start your countdown: Next June, PegaWorld is returning live to Las Vegas. Break free from life's distractions and hear the stories, meet the people, and tour the tech that will inspire you to create smarter, more adaptable ways of working. With all the momentum building, are you ready to step inside?</p>
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'none',
+    valign_items: 'center',
+    template: [
+      'halves@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-light',
+      style: 'background-color: var(--bolt-color-navy-xlight);'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      order: 'last@from-medium',
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'none',
+    valign_items: 'center',
+    template: [
+      'halves@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-light',
+      style: 'background-color: var(--bolt-color-navy-xlight);'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_content %}
+    {% include '@bolt-components-headline/headline.twig' with {
+      text: "PegaWorld iNspire 2022 highlights",
+      tag: 'h2',
+      size: 'xlarge',
+    } only %}
+    <p>Thank you to all our clients, partners, and speakers who shifted perspectives with us in 2022.</p>
+  {% endset %}
+
+  {% set layer_cards %}
+    {% set layer_card %}
+      {% set video_thumbnail %}
+        {% set image %}
+          {% include '@bolt-elements-image/image.twig' with {
+            attributes: {
+              src: '/images/placeholders/16x9.jpg',
+              alt: 'A Rock Climber',
+              loading: 'lazy',
+              width: 400,
+              height: 300,
+            }
+          } only %}
+        {% endset %}
+        {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
+          content: image,
+          video: {
+            title: 'This is a Video Title',
+            duration: '4:26',
+            show_title: true
+          }
+        } only %}
+      {% endset %}
+
+      {% include '@bolt-components-teaser/teaser.twig' with {
+        signifier: video_thumbnail,
+        headline: {
+          text: 'Booking.com’s Mission to Create Simplified and Connected Experiences',
+          link_attributes: {
+            type: 'button',
+            'data-bolt-modal-target': '#' ~ '000',
+          },
+        },
+        description: {
+          content: 'Booking.com is on a mission to make it easier for everyone to experience the world.',
+        }
+      } only %}
+    {% endset %}
+
+    {% set layer_items %}
+      {% for i in 1..3 %}
+        {% include '@bolt-layouts-layout/layout-item.twig' with {
+          content: layer_card,
+        } only %}
+      {% endfor %}
+    {% endset %}
+
+    {% include '@bolt-layouts-layout/layout.twig' with {
+      content: layer_items,
+      padding_top: 'small',
+      padding_bottom: 'small',
+      template: [
+        'thirds@from-medium',
+      ],
+    } only %}
+  {% endset %}
+
+  {% set layer_button %}
+    {% include '@bolt-elements-button/button.twig' with {
+      content: 'Watch all replays',
+      attributes: {
+        href: '#!',
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_content,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_cards,
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_button,
+      attributes: {
+        class: 'u-bolt-text-align-center',
+      }
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    attributes: {
+      class: 't-bolt-light',
+      style: 'background-color: var(--bolt-color-navy-xlight);'
+    }
+  } only %}
+{# END LAYER #}
+
+{# START LAYER #}
+  {% set layer_supplement %}
+    {% include '@bolt-elements-image/image.twig' with {
+      attributes: {
+        src: '/images/placeholders/4x3.jpg',
+        alt: 'A Rock Climber',
+        loading: 'lazy',
+        width: 800,
+        height: 600,
+      }
+    } only %}
+  {% endset %}
+
+  {% set layer_quote %}
+    {% include '@bolt-components-blockquote/blockquote.twig' with {
+      author: {
+        name: 'PegaWorld attendee',
+      },
+      content: '<p>Extraordinary conference with excellent, engaging keynotes and shared experiences from around the world. No better opportunity to meet likeminded colleagues interested in state-of-the-art technology. Great access to partners, C-Suite Pega execs, and specialists.</p>'
+    } %}
+  {% endset %}
+
+  {% set layer_items %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_supplement,
+      order: 'last@from-medium',
+      valign_self : 'end-offset',
+    } only %}
+    {% include '@bolt-layouts-layout/layout-item.twig' with {
+      content: layer_quote,
+    } only %}
+  {% endset %}
+
+  {% include '@bolt-layouts-layout/layout.twig' with {
+    content: layer_items,
+    padding_top: 'large',
+    padding_bottom: 'large',
+    valign_items: 'center',
+    template: [
+      'halves@from-medium',
+    ],
+    attributes: {
+      class: 't-bolt-violet',
+    }
+  } only %}
+{# END LAYER #}