layout docs

Layout

The foundational template of any given layout.
HTML Usage

We recommend the use of HTML over Twig for this item.

{% set content %}
<bolt-layout>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>
 Schema
Layout (layout.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-layout> tag.

 object —
  • —
content

Content of the layout. While anything can be passed, layout items are preferred.

 any —
  • —
template

Select from a predefined set of layout templates. Numbers represent % of each layout item widths. The @from-* keywords mean "starting from a particular breakpoint".

 array[string] —
  • 50, 50@from-small, 50@from-medium, 67, 67@from-small, 67@from-medium, 75, 75@from-small, 75@from-medium, 25/25/50@from-small, 25/25/50@from-medium, 25/50/25@from-small, 25/50/25@from-medium, 25/75@from-small, 25/75@from-medium, 33/67@from-small, 33/67@from-medium, 50/25/25@from-small, 50/25/25@from-medium, 67/33@from-small, 67/33@from-medium, 75/25@from-small, 75/25@from-medium, halves, halves@from-small, halves@from-medium, thirds@from-small, thirds@from-medium, fourths@from-small, fourths@from-medium, tiles, tiles@from-small, tiles@from-medium, flag, flag@from-small, flag@from-medium, full-vertical-push-last-item
gutter

Set the horizontal spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
row_gutter

Set the vertical spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
padding_top

Set the top padding of the layout.

 string medium
  • none, small, medium, large, xlarge
padding_bottom

Set the bottom padding of the layout.

 string medium
  • none, small, medium, large, xlarge
align_items

Control the horizontal alignment of all layout items.

 string center
  • start, center, end
valign_items

Control the vertical alignment of all layout items. Unset is required for setting equal-height layout items, do not set this prop if that is the intention.

 string —
  • start, center, end
full_bleed

Removes all outer spacing, allowing the layout to extend from edge to edge of its container.

 boolean false
  • —
background

A content container that delivers important messages to the user.

 object —
    • attributes

      A Drupal-style attributes object with extra attributes to append to this component.

      • —
    • opacity

      Overlay opacity

      • none, light, medium, heavy, full
    • fill

      Type of fill to use for the overlay.

      • solid or gradient
    • focal_point

      Point where the background gradient highlight should originate.

        • horizontal

          X-axis positioning for the background focal point

          • center, left, right
        • vertical

          Y-axis positioning for the background focal point

          • center, top, bottom
    • video

      Set to true if you like to use video as a background.

      • —
    • video_toggle_button

      A Drupal-rendered button that will play and pause a background video.

      • —
    • items

      An array of renderable items to place in the background.

      • [items]:
        • Type:any
    • shape_group

      Add a Bolt Background Shapes group.

      • A, B, none
    • shape_alignment

      Alignment of shape group.

      • left or right
Layout item (layout-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-layout-item> tag.

 object —
  • —
content

Content of the layout item.

 any —
  • —
valign_self

Control the vertical alignment of the layout item. This will ignore the vertical alignment set on the layout.

 string —
  • start, center, end, start-offset, end-offset
order

Bring the layout item to the start or the end of the layout. Only use this if the order of layout items need to be adjusted at specific breakpoints. The @from-* keywords mean "starting from a particular breakpoint". The item order can be reset to the default order related to the HTML structure at larger breakpoint if needed. Use reset@from-* when the order should be default again. Please note that the reset option works only when first or last option is used. Do not laverage options for the same breakpoint like "first@from-small" and "reset@from-small" as this cannot work.

 array[string] —
  • first, last, first@from-small, first@from-medium, last@from-small, last@from-medium, reset@from-small, reset@from-medium
Install Install 
npm install @bolt/layouts-layout
Dependencies @bolt/core

layout

Basic Layout A layout is the core foundation of any given page. It creates the responsive framework for single-column and multi-column design.
Important Notes: Layout is versatile enough to handle a variety of page layouts. View full page use case
Demo Layout item Layout item
Twig
// Set up the layout items
{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Layout item'
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Layout item'
  } only %}
{% endset %}

// Pass layout items to the content prop
{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    '67/33@from-small',
    '75/25@from-medium',
  ],
} only %}
HTML
<bolt-layout template="67/33@from-small 75/25@from-medium">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout template

Template Template controls how the layout behaves. There are many options available to accommodate all kinds of use cases.
Important Notes: Single-column: 50, 67, and 75 represent the percentage of width for the layout items. Layout item width is full if no template is set. Layout items can be horizontally centered only in a single-column layout.Multi-column: again, numbers represent percentage. Combinations of 25, 50, 67, and 75 can be used as long as they add up to 100 (eg. 25/50/25@from-small). These options must be used with the @from-* breakpoint postfix. @from-small means starting from small breakpoint and beyond; @from-medium means starting from medium breakpoint and beyond.Traditional: even columns can be created with halves, thirds, and fourths. These options also must be used with the @from-* breakpoint postfix.Special: flag is a common layout that contains an image on the left and text content on the right; tiles renders even-width layout items that will wrap once they hit a certain min-width.--l-bolt-layout-flag-media-width and --l-bolt-layout-tile-min-width CSS custom properties are available to further customize the Flag and Tiles templates.Reference the schema for all options. Layout schema
Demo Single-column full 50% 67% 75% Multi-column 67% 33% 33% 67% 75% 25% 25% 75% 25% 50% 25% 50% 25% 25% 25% 25% 50% Traditional halves halves thirds thirds thirds fourths fourths fourths fourths Special flag media flag content tile tile tile tile tile tile tile tile tile tile
Twig
{% include '@bolt-layouts-layout/layout.twig' with {
  template: [
    '67/33@from-small',
    '75/25@from-medium',
  ],
  ...
} only %}
HTML
<bolt-layout template="67/33@from-small 75/25@from-medium">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout sub template

Sub-template and Nested Layout A layout can be nested in another layout (i.e. put a layout inside a layout item).
Important Notes: All templates work with nested layouts, while there is one special template that is specifically designed for nested layouts. full-vertical-push-last-item creates a vertical layout that is 100% height, and its last item is pushed to the bottom. This particular template serves a specific purpose and does not work with the layout’s vertical and horizontal alignments.
Demo In this layout, there is a parent layout that is handling the 2 columns. Within each column, there is a nested layout that is full height and it pushes its last item to the bottom. Even though the first column is taller than the second column, the last items in each column are aligned to the bottom. Last layout item pushed to bottom Nested layout with 2 layout items, this paragraph of text being the first item. Last layout item pushed to bottom Now with actual text and a CTA button. Ready to crush business complexity? Our software helps you work smarter, simpler, and faster. Let’s go!
Twig
// Set up nested layout
{% set nested_layout %}
  {% set layout_items %}
    {% include '@bolt-layouts-layout/layout-item.twig' with {
      content: 'Layout item'
    } only %}
    {% include '@bolt-layouts-layout/layout-item.twig' with {
      content: 'Layout item'
    } only %}
  {% endset %}
  {% include '@bolt-layouts-layout/layout.twig' with {
    content: layout_items,
    template: [
      'full-vertical-push-last-item',
    ],
  } only %}
{% endset %}

// Pass nested layouts to parent layout
{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: nested_layout
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: nested_layout
  } only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    'halves@from-small',
  ],
} only %}
HTML
<bolt-layout template="halves@from-small">
  <bolt-layout-item>
    <bolt-layout template="full-vertical-push-last-item">
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
    </bolt-layout>
  </bolt-layout-item>
  <bolt-layout-item>
    <bolt-layout template="full-vertical-push-last-item">
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
    </bolt-layout>
  </bolt-layout-item>
</bolt-layout>

layout background and theme

Background Image and Color Themes Background images can be added to any layout and color themes can be enabled by theme classes.
Important Notes: The background image can be either the Background component or an absolute positioned image.
Demo
This layout has a background image and theme is set to dark.
Twig
// Set a background
{% set background %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      background: true,
      attributes: {
        src: '/images/placeholders/backgrounds/background-light-tall.jpg'
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-background/background.twig' with {
    opacity: 'heavy',
    fill: 'gradient',
    items: [
      image
    ]
  } only %}
{% endset %}

// Pass the background to the background prop
{% include '@bolt-layouts-layout/layout.twig' with {
  background: background,
  attributes: {
    class: 't-bolt-dark',
  },
  ...
} only %}
HTML
<bolt-layout class="t-bolt-dark">
  <!-- Background image goes here before layout items -->
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout gutter

Gutter Gutter is the horizontal spacing in between layout items. Row gutter is the vertical spacing in between layout items.
Important Notes: Reference the schema for all options. Layout schema
Demo Gutter
large gutter
large gutter
large gutter
 Row Gutter
small row gutter
small row gutter
small row gutter
Twig
{% include '@bolt-layouts-layout/layout.twig' with {
  gutter: 'large',
  row_gutter: 'small',
  ...
} only %}
HTML
<bolt-layout gutter="large" row-gutter="small">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout padding

Padding Padding top and bottom can be individually adjusted based on the use case.
Important Notes: Reference the schema for all options. Layout schema
Demo Medium padding-top and xlarge padding-bottom
Layout item
Layout item
Layout item
Twig
{% include '@bolt-layouts-layout/layout.twig' with {
  padding_top: 'small',
  padding_bottom: 'xlarge',
  ...
} only %}
HTML
<bolt-layout padding-top="small" padding-bottom="xlarge">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout horizontal alignment

Horizontal Alignment A single layout item can be horizontally aligned to the start, center, or end.
Important Notes: This prop is only effective in a single-column layout (e.g. 50%, 67%, and 75%).Reference the schema for all options. Layout schema
Demo
75% and horizontally aligned start
75% and horizontally aligned center
75% and horizontally aligned end
Twig
{% include '@bolt-layouts-layout/layout.twig' with {
  template: [
    '75',
  ],
  align_items: 'center',
  ...
} only %}
HTML
<bolt-layout template="75" align-items="center">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout vertical alignment

Vertical Alignment A group of layout items can be vertically aligned to the start, center, or end.
Important Notes: If vertical alignment is set, layout items cannot match each other’s height even if 100% height is used. Do not use this prop if equal height layout items are desired.This prop is only effective in a multi-column layout.Reference the schema for all options. Layout schema
Demo Vertically aligned start
Short item
Tall item (The height of the layout items will not match. Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Vertically aligned center
Short item
Tall item (The height of the layout items will not match. Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Vertically aligned end
Short item
Tall item (The height of the layout items will not match. Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Twig
{% include '@bolt-layouts-layout/layout.twig' with {
  template: [
    'halves',
  ],
  valign_items: 'center',
  ...
} only %}
HTML
<bolt-layout template="halves" valign-items="center">
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout item vertical alignment

Vertical Alignment for Individual Layout Item A particular layout item can be vertically aligned itself to start, center, or end, ignoring the vertical aligment on the layout level.
Important Notes: If vertical alignment is set, layout items cannot match each other’s height even if 100% height is used. Do not use this prop if equal height layout items are desired.This prop is only effective in a multi-column layout.For regular options, they are only effective when applied to the shorter item.For advanced usage, the offset options can even offset the top or bottom padding of the layout. This is useful when a design calls for a layout item to touch the edge of the layout.If you intend to vertically align all layout items uniformly, please use the prop on the layout level. View layout vertical alignment
Demo Regular Alignments Vertically aligned itself start
Short item (start)
Tall item (Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Vertically aligned itself center
Short item (center)
Tall item (Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Vertically aligned itself end
Short item (end)
Tall item (Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)
Offset Alignments Vertically aligned itself start-offset
Layout item (start-offset)
Layout item
Vertically aligned itself end-offset
Layout item (end-offset)
Layout item
Offset Use Cases Vertically aligned itself start-offset Layout item The other layout item (the image) is using start-offset. Vertically aligned itself end-offset Layout item The other layout item (the image) is using end-offset.
Twig
{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Short item',
    align_self: 'end',
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Long item (Some more text to make this taller. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla tenetur natus dolore recusandae incidunt odio quasi reiciendis fugiat nihil quod? Assumenda culpa, cupiditate debitis ipsum excepturi tempora similique eum saepe!)'
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    'halves',
  ],
} only %}
HTML
<bolt-layout template="halves">
  <bolt-layout-item align-self="end">
    <!-- Shorter content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Longer content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout item order

Content Order of Individual Layout Item Bring the layout item to the start or the end of the layout.
Important Notes: Only use this if the order of layout items need to be adjusted at specific breakpoints.The @from-* keywords mean "starting from a particular breakpoint".The item order can be reset to the default order related to the HTML structure at larger breakpoint if needed. Use reset@from-* when the order should be default again.Please note that the reset option works only when first or last option is used. Do not laverage options for the same breakpoint like "first@from-small" and "reset@from-small" as this cannot work.Reference the schema for all options. Layout schema
Demo
Layout item (this will come last once the viewport is larger than the small breakpoint)
Layout item
Layout item
Twig
{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Layout item (this will come last once the viewport is larger than the small breakpoint)',
    order: ['last@from-small'],
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Layout item',
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: 'Layout item',
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  template: [
    'thirds@from-small',
  ],
} only %}
HTML
<bolt-layout template="thirds@from-small">
  <bolt-layout-item order="last@from-small">
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout full bleed

Layout Full Bleed It's possible to have "top-level" layout with no outer spaces.
Important Notes: Any bolt-layout that is not directly contained within another bolt-layout is considered a "top-level". If it is "top-level" then it has outer sapces on the top, bottom, left and right. Any bolt-layout that is directly placed inside another bolt-layout is considered a "nested" then it occupies all available width without outer spaces.Use full_bleed set to true if there's a desire of having "top-level" bolt-layout looks like nested - occupy all available width without outer spaces.Don't use full_bleed option on nested bolt-layouts since they occupy all available space by default.
Demo

This below is top-level bolt-layout with the full_bleed prop set to true. For this reason it hasn't got outer spaces, same as in nested bolt-layouts.

Alt text.

This is nested bolt-layout. Nested bolt-layouts have no paddings around by default. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio consequuntur ipsam consectetur at, quod optio! Neque quo eligendi itaque enim non fugiat odit suscipit qui voluptatum accusantium provident, quis voluptates.

Alt text.
Twig
{% set nested_layout %}
  {% set layout_items %}
    {% include '@bolt-layouts-layout/layout-item.twig' with {
      content: 'content'
    } only %}
    {% include '@bolt-layouts-layout/layout-item.twig' with {
      content: 'content'
    } only %}
  {% endset %}
  {% include '@bolt-layouts-layout/layout.twig' with {
    content: layout_items,
    template: [
      '25/75@from-small'
    ],
  } only %}
{% endset %}
{% include '@bolt-layouts-layout/layout.twig' with {
  content: nested_layout,
  template: [
    'halves@from-small',
  ],
  full_bleed: true,
} only %}
HTML
<!-- Add prop to make top level layout behave like was nested -->
<bolt-layout template="halves@from-small" full-bleed>
  <bolt-layout-item>
    <!-- Add prop to make nested layout behave like was top level -->
    <bolt-layout template="25/75@from-small">
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
      <bolt-layout-item>
        <!-- Content goes here -->
      </bolt-layout-item>
    </bolt-alyout>
  </bolt-layout-item>
  <bolt-layout-item>
    <!-- Content goes here -->
  </bolt-layout-item>
</bolt-layout>

layout use case about hero

About Us Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
Demo Image alt text

Hi, we're Pegasystems.
But you can call us Pega.

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.
Image alt text

6,000 global employees

 Image alt text

3 regional HQs in North America, Europe, & Asia Pacific

 Image alt text

250+ global partners

 Image alt text

Dozens of culture & technology awards

 Download corporate fact sheet
Twig
{% set 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 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 top_row_layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: supplement
  } only %}
{% endset %}

{% set tile_1 %}
  {% 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 %}

{% set tile_2 %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Image alt text',
      src: '/images/content/icons/HQs.png',
      loading: 'eager',
      width: 80,
      height: 80,
      attributes: {
        class: 'u-bolt-margin-bottom-small',
      },
    },
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: '<strong>3</strong> regional HQs in North America, Europe, & Asia Pacific',
    tag: 'h3',
    size: 'large',
  } only %}
{% endset %}

{% set tile_3 %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Image alt text',
      src: '/images/content/icons/partners.png',
      loading: 'eager',
      width: 80,
      height: 80,
      attributes: {
        class: 'u-bolt-margin-bottom-small',
      },
    },
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: '<strong>250+</strong> global partners',
    tag: 'h3',
    size: 'large',
  } only %}
{% endset %}

{% set tile_4 %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Image alt text',
      src: '/images/content/icons/awards.png',
      loading: 'eager',
      width: 80,
      height: 80,
      attributes: {
        class: 'u-bolt-margin-bottom-small',
      },
    },
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: '<strong>Dozens</strong> of culture &amp; technology awards',
    tag: 'h3',
    size: 'large',
  } only %}
{% endset %}

{% set middle_row_layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: tile_1,
    attributes: {
      class: 'u-bolt-text-align-center',
    }
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: tile_2,
    attributes: {
      class: 'u-bolt-text-align-center',
    }
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: tile_3,
    attributes: {
      class: 'u-bolt-text-align-center',
    }
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: tile_4,
    attributes: {
      class: 'u-bolt-text-align-center',
    }
  } only %}
{% endset %}

{% set bottom_row_layout_items %}
  {% set button %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Download corporate fact sheet',
      attributes: {
        href: '#!',
      }
    } only %}
  {% endset %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: button,
    attributes: {
      class: 'u-bolt-text-align-center',
    }
  } only %}
{% endset %}

{% set layout %}
  {% set content %}
    {% include '@bolt-layouts-layout/layout.twig' with {
      content: top_row_layout_items,
      gutter: 'large',
      row_gutter: 'large',
      valign_items: 'center',
      template: [
        'halves@from-medium'
      ]
    } only %}
    {% include '@bolt-layouts-layout/layout.twig' with {
      content: middle_row_layout_items,
      gutter: 'large',
      padding_top: 'medium',
      padding_bottom: 'medium',
      template: [
        'tiles@from-small'
      ]
    } only %}
    {% include '@bolt-layouts-layout/layout.twig' with {
      content: bottom_row_layout_items,
    } only %}
  {% endset %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content,
  } only %}
{% endset %}

{% set 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: layout,
  padding_top: 'large',
  padding_bottom: 'large',
  background: background,
  attributes: {
    class: 't-bolt-gray-xlight'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case artificial intelligence hero

Artificial Intelligence Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
  • To set a background image that utilizes a gradient or color affect, continue to use the Bolt Background Component. This component still utilizes the Image Component and will not be performant.
Demo

Artificial Intelligence

AI decision-making: Beyond the hype

Real-time AI isn’t just a trend – it’s a way to transform your customer experience. We’ve gathered experts, best practices, and examples to show you how.

As the technology evolves ... so increases the opportunity for brands to build higher-value relationships with consumers based on relevance and intimacy.

Mark Taylor
Chief Experience Officer, Digital Customer Experience Practice
Twig
{% set content %}
  {% include '@bolt-components-headline/eyebrow.twig' with {
    text: 'Artificial Intelligence',
    tag: 'p',
  } only %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'AI decision-making: Beyond the hype',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Real-time AI isn’t just a trend – it’s a way to transform your customer experience. We’ve gathered experts, best practices, and examples to show you how.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
{% endset %}

{% set supplement %}
  {% include '@bolt-components-blockquote/blockquote.twig' with {
    logo: {
      invert: true,
      src: '/images/content/logos/logo-paypal.svg'
    },
    content: '<p>As the technology evolves ... so increases the opportunity for brands to build higher-value relationships with consumers based on relevance and intimacy.</p>',
    author: {
      name: 'Mark Taylor',
      title: 'Chief Experience Officer, Digital Customer Experience Practice'
    }
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: supplement
  } only %}
{% endset %}

{% set background %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      background: true,
      attributes: {
        src: '/images/placeholders/backgrounds/background-light2.jpg'
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-background/background.twig' with {
    fill: 'solid',
    items: [
      image
    ]
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  gutter: 'large',
  row_gutter: 'small',
  padding_top: 'large',
  padding_bottom: 'large',
  valign_items: 'center',
  background: background,
  template: [
    '67/33@from-medium'
  ],
  attributes: {
    class: 't-bolt-black',
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case center out hero

Center Out Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
  • The order prop was used to move the image above the headline on mobile.
Demo Image alt text

Build from the center out

Feeling the need for speed and scalability? You can have both if you take a Center-out™ approach to structuring your technology – and avoid some common mistakes.

Get the ebook
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Build from the center out',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Feeling the need for speed <em>and</em> scalability? You can have both if you take a Center-out&trade; approach to structuring your technology – and avoid some common mistakes.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Get the ebook',
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% set supplement %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="6154161119001"
      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 layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: supplement,
    order: ['last@from-medium']
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
{% endset %}

{% set background %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: '/images/placeholders/backgrounds/background-dark.jpg',
      loading: 'eager',
      width: '100vw'
    },
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  gutter: 'large',
  row_gutter: 'small',
  padding_top: 'large',
  padding_bottom: 'large',
  valign_items: 'center',
  background: background,
  template: [
    '67/33@from-medium'
  ],
  attributes: {
    class: 't-bolt-navy'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case customer lifetime value hero

Customer Lifetime Value Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
  • u-bolt-text-align-center utility class has been added to the layout column through a style tag.
  • This example contains custom code found on the live example.
Demo Image alt text

Engage with empathy. Adapt instantly.

Keeping pace with a changing market doesn’t have to be complicated. With Pega, you can hyper-personalize every interaction to stay timely and relevant – no matter what happens next.

Exlpainer 0:16 Watch it come to life
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Engage with empathy. Adapt instantly.',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Keeping pace with a changing market doesn’t have to be complicated. With Pega, you can hyper-personalize every interaction to stay timely and relevant – no matter what happens next.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% include '@bolt-components-list/list.twig' with {
    display: 'inline',
    align: 'center',
    separator: 'solid',
    items: [
      '<small>Exlpainer</small>',
      '<small>0:16</small>',
    ],
  } only %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Watch it come to life',
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content,
    attributes: {
      class: 'u-bolt-text-align-center'
    }
  } only %}
{% endset %}

{% set 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: layout_items,
  padding_top: 'large',
  padding_bottom: 'large',
  background: background,
  align_items: 'center',
  template: [
    '67@from-medium'
  ],
  attributes: {
    class: 't-bolt-gray-xlight'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case german homepage hero

German Homepage Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
  • Bolt Layout does not offer a 40% column option. To adjust, the columns were increased to 50% column width. Due to this change, the image will appear smaller.
  • The order prop was used to move the image above the headline on mobile.
Demo Image alt text

Mit Pega komplexe Abläufe genial einfach umsetzen

Nehmen Sie in einer sich rasant ändernden Welt eine Spitzenposition ein – dank besserer Entscheidungsfindung und höherer Produktivität.

Warum Pega? Entdecken Sie unsere Plattform
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Mit Pega komplexe Abläufe genial einfach umsetzen',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Nehmen Sie in einer sich rasant ändernden Welt eine Spitzenposition ein – dank besserer Entscheidungsfindung und höherer Produktivität.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% set button_1 %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Warum Pega?',
      display: 'block',
      attributes: {
        href: '#!',
      }
    } only %}
  {% endset %}
  {% set button_2 %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Entdecken Sie unsere Plattform',
      display: 'block',
      hierarchy: 'secondary',
      attributes: {
        href: '#!',
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-list/list.twig' with {
    display: 'inline@small',
    spacing: 'small',
    items: [
      button_1,
      button_2
    ]
  } only %}
{% endset %}

{% set supplement %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Image alt text',
      src: '/images/content/heroes/foreground-top.jpg',
      loading: 'eager',
      width: 1372,
      height: 780,
      style: 'display: block;'
    },
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    valign_self: 'start-offset',
    content: supplement,
    order: ['last@from-medium'],
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  gutter: 'large',
  row_gutter: 'large',
  padding_top: 'large',
  padding_bottom: 'large',
  valign_items: 'center',
  template: [
    'halves@from-medium'
  ],
  attributes: {
    class: 't-bolt-gray-xlight'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case homepage hero

English Homepage Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
Demo Image alt text Image alt text

Ready to crush business complexity?

Our software helps you work smarter, simpler, and faster.

Let's go
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Ready to crush business complexity?',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Our software helps you work smarter, simpler, and faster.',
    tag: 'h2',
    size: 'xlarge',
  } only %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Let\'s go',
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% set supplement %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Image alt text',
      src: '/images/content/heroes/foreground-go-graphic.png',
      loading: 'eager',
      width: 516,
      height: 389,
    },
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    valign_self: 'start-offset',
    content: supplement,
  } only %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
{% endset %}

{% set 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: layout_items,
  gutter: 'large',
  row_gutter: 'large',
  padding_top: 'large',
  padding_bottom: 'large',
  valign_items: 'center',
  background: background,
  template: [
    'halves@from-medium'
  ],
  attributes: {
    class: 't-bolt-gray-xlight'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case infinity hero

Infinity Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
  • u-bolt-text-align-center utility class has been added to the layout column through a style tag.
  • This example contains custom code found on the live example.
Demo Image alt text Alt text.

One powerful portfolio of enterprise software. Limitless possibilities.

How far will infinity take you?
Twig
{% set content %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Alt text.',
      src: '/images/content/icons/infinity.png',
      width: '60%',
      loading: 'eager'
    },
  } only %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'One powerful portfolio of enterprise software. Limitless possibilities.',
    tag: 'h1',
    size: 'xlarge',
  } only %}
  {% set video %}
    <video-js
      data-account="1900410236"
      data-player="O3FkeBiaDz"
      data-embed="default"
      data-video-id="5793474985001"
      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 %}

  <div style="margin-top: 80px; margin-bottom: 76px;">
    <style>
      #arrow-text {
        text-decoration: none;
        text-transform: uppercase;
        font-weight: bold;
      }
      #down-arrow {
        border: solid;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 5px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
    </style>
    <span id="arrow-text" class="c-bolt-text--xsmall">How far will infinity take you?</span>
    <br />
    <span id="down-arrow"></span>
  </div>
{% endset %}

{% set background %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: '/images/content/layout/background-infinity.jpg',
      loading: 'eager',
      width: '100vw'
    },
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content,
    attributes: {
      class: 'u-bolt-text-align-center'
    }
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  padding_top: 'large',
  padding_bottom: 'large',
  align_items: 'center',
  background: background,
  template: [
    '67@from-medium'
  ],
  attributes: {
    class: 't-bolt-navy'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case locations france hero

Locations (France) Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
  • To set a background image that utilizes a gradient or color affect, continue to use the Bolt Background Component. This component still utilizes the Image Component and will not be performant.
Demo

Pega in France

Your partner for digital transformation

Founded in 1983 in the United States, Pega is the leader in dedicated software for customer engagement and process automation. In 2010, Pega arrived in France with talented employees and an increased knowledge of the market and local specificities. Today Pega France is growing and is working to surround itself with the most innovative minds.

Contact Us Join Us
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'Pega in France',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Your partner for digital transformation',
    tag: 'h2',
    size: 'xxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Founded in 1983 in the United States, Pega is the leader in dedicated software for customer engagement and process automation. In 2010, Pega arrived in France with talented employees and an increased knowledge of the market and local specificities. Today Pega France is growing and is working to surround itself with the most innovative minds.',
    tag: 'h3',
    size: 'large',
  } only %}
  {% set button_1 %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Contact Us',
      display: 'block',
      attributes: {
        href: '#!',
      }
    } only %}
  {% endset %}
  {% set button_2 %}
    {% include '@bolt-elements-button/button.twig' with {
      content: 'Join Us',
      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 layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content
  } only %}
{% endset %}

  {% set background %}
    {% set image %}
      {% include '@bolt-elements-image/image.twig' with {
        background: true,
        attributes: {
          src: '/images/placeholders/backgrounds/background-busy.jpg'
        },
      } only %}
    {% endset %}
    {% include '@bolt-components-background/background.twig' with {
      opacity: 'heavy',
      focal_point: {
        vertical: 'center',
        horizontal: 'center'
      },
      items: [
        image
      ]
    } only %}
  {% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  padding_top: 'xlarge',
  padding_bottom: 'xlarge',
  valign_items: 'center',
  background: background,
  template: [
    '67/33@from-medium'
  ],
  attributes: {
    class: 't-bolt-navy-dark'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

layout use case platform hero

Platform Hero Live example
Important Notes:
  • ALL images in a hero require the loading="eager" HTML attribute.
  • ALL images should utilize the srcset HTML attribute (not done for this example due to time).
  • u-bolt-text-align-center utility class has been added to the layout column through a style tag.
Demo Image alt text

The power of the low-code Pega Platform

Simplify and streamline to get work done
Twig
{% set content %}
  {% include '@bolt-components-headline/headline.twig' with {
    text: 'The power of the low-code Pega Platform',
    tag: 'h1',
    size: 'xxxlarge',
  } only %}
  {% include '@bolt-components-headline/subheadline.twig' with {
    text: 'Simplify and streamline to get work done',
    tag: 'h2',
    size: 'xlarge',
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content,
    attributes: {
      class: 'u-bolt-text-align-center'
    }
  } only %}
{% endset %}

{% set background %}
  {% include '@bolt-elements-image/image.twig' with {
    background: true,
    attributes: {
      alt: 'Image alt text',
      src: '/images/placeholders/backgrounds/background-dark.jpg',
      loading: 'eager',
      width: '100vw'
    },
  } only %}
{% endset %}

{% include '@bolt-layouts-layout/layout.twig' with {
  content: layout_items,
  background: background,
  padding_top: 'large',
  padding_bottom: 'large',
  align_items: 'center',
  template: [
    '67@from-medium'
  ],
  attributes: {
    class: 't-bolt-navy'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.