DS-843: Advanced Layout Demos

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&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 #}