grid docs

Grid

A flexible 12-column grid with responsive breakpoint options.
HTML Usage

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

<bolt-grid>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
</bolt-grid>
 Schema
Grid (grid.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
gutter

Spacing between the columns of the grid.

 string medium
  • none, small, medium, large
row_gutter

Spacing between the rows of the grid.

 string medium
  • none, small, medium, large
items

Array of grid items to render inside the grid.

 array —
    • attributes

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

      • —
    • content

      Content to render inside each grid item.

      • —
    • valign

      Vertical alignment of the grid item itself.

      • start, center, end
    • column_start

      The vertical starting point of the grid item. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column start is set at 6 for any browser width larger and equal to the small breakpoint. This prop is required to make the grid work in Internet Explorer.

      • —
    • column_span

      The number of columns the grid item should span across. This accepts any number from 1 to 12, and their perspective responsive variations for advanced usage, for example, 6@small means the column span is set at 6 for any browser width larger and equal to the small breakpoint.

      • —
    • row_start

      The horizontal starting point of the grid item. This prop is required to make the grid work in Internet Explorer.

      • —
    • row_span

      The number of rows the grid item should span across.

      • —
Grid Item (grid-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
valign

Vertical alignment of the grid item itself

 string auto
  • auto, start, center, end
column_start

The general column the grid item should start on. For example, a with the attributes columns="3" start-column="2" would start on the 2nd column and extend for 3 columns so it would span the 2nd, 3rd and 4th column.

 string —
  • —
column_end

The general column the grid item should stop on. For example, a with the attributes start-column="2" end-column="3" would start on the 2nd column and extend until the 3rd column.

 string —
  • —
column_span

The number of columns the should span across

 string —
  • —
row_start

Specifies a grid item’s start position within the grid row

 string auto
  • —
row_end

Specifies a grid item’s ending position within the grid row

 string auto
  • —
row_span

Specifies the number of rows a should span across

 string auto
  • —
Install Install 
npm install @bolt/layouts-grid
Dependencies @bolt/core

grid

Basic Grid Layout

Bolt Grid is a 12-column grid design approach

By using The Grid to design layouts, consistency is guaranteed. If your goal is to confine your layout to a 12-column grid and have elements spaced and lined up consistently using the Bolt spacing system, The Grid is for you. Otherwise, you should not use The Grid, there is the List component for simple layouts and alignments.

 Demo
X
X
X
X
X
X
X
X
X
X
X
X
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      content: 'Grid item',
    },
    {
      content: 'Grid item',
    },
    ...
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
  <bolt-grid-item>
    <!-- Content goes here -->
  </bolt-grid-item>
  ...
</bolt-grid>

grid start and span

Grid column start and column span The Bolt Grid is built on the concept of column start and column span, this allows the user to have full control of the grid layout.
Important Notes:

Please refer to the Bolt Breakpoints for all possible breakpoint names. number@breakpoint-name means starting at that specific breakpoint, change to the number defined. For example: column-span="6@small" means starting at the small breakpoint, span 6 columns.
Demo
Aside
Main
Aside
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '2',
      content: item_aside,
    },
    {
      column_start: '3',
      column_span: '8',
      content: item_main,
    },
    {
      column_start: '11',
      column_span: '2',
      content: item_aside,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item column-start="1" column-span="2">
    <!-- Aside Content -->
  </bolt-grid-item>
  <bolt-grid-item column-start="3" column-span="8">
    <!-- Main Content -->
  </bolt-grid-item>
  <bolt-grid-item column-start="11" column-span="2">
    <!-- Aside Content -->
  </bolt-grid-item>
</bolt-grid>

grid gutter variations

Grid Gutter Variations The space between each column, known as a gutter, is configurable with the variable of the same name. The default value is medium.
Important Notes:

All accepted values for gutter can be seen in the Schema tab at the top of this page.
Demo

None Gutter

Span 4 columns
Span 4 columns
Span 4 columns

Medium Gutter

Span 4 columns
Span 4 columns
Span 4 columns
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  gutter: 'large',
  ...
} only %}
HTML
<bolt-grid gutter="large">
  <!-- Grid Items -->
</bolt-grid>

grid row gutter variations

Grid Row Gutter Variations The space between each row, known as a rowigutter or row_gutter, is configurable with the variable of the same name. The default value is medium.
Important Notes:

All accepted values for row-gutter can be seen in the Schema tab at the top of this page.
Demo

None Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns

Medium Row Gutter

Span 12 columns
Span 12 columns
Span 12 columns
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  row_gutter: 'large',
  ...
} only %}
HTML
<bolt-grid row-gutter="large">
  <!-- Grid Items -->
</bolt-grid>

grid item column span variations

Grid Item Column Span Variations Each item can span from 1 to 12 columns. Use any combination that adds up to 12 columns to form a row.
Important Notes:

In this example, the item 1 is starting at column 1 and spanning 3 columns wide, the item 2 is starting at column 4 and spanning 9 columns.
Demo
Item 1
Item 2
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '3',
      content: item_1,
    },
    {
      column_start: '4',
      column_span: '9',
      content: item_2,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item column-start="1" column-span="3">
    <!-- Item 1 Content -->
  </bolt-grid-item>
  <bolt-grid-item column-start="4" column-span="9">
    <!-- Item 2 Content -->
  </bolt-grid-item>
</bolt-grid>

grid item row span variations

Grid Item Row Span Variations Each item can span from 1 to 12 rows. Row span works as long as you have multiple rows. For example, if you only have 2 rows of content, you cannot have an item to span 3 rows because the highest you can get is 2. Demo SPAN 3 ROWS
Row
Row
Row
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      row_span: '3',
    ...
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item row-span="3">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid item responsive breakpoints

Grid Item Responsive Breakpoints

Use the @breakpoint options to do advanced responsive layouts. More information about breakpoints can be found on the dedicated page.

  • Item 1
    1. Up to small breakpoint: start at row 2 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 4 columns
    3. Starting at medium breakpoint: start at row 1 and span for 3 columns
  • Item 2
    1. Up to small breakpoint: start at row 1 and span 12 columns
    2. Starting at small breakpoint: start at row 1 and span for 8 columns
    3. Starting at medium breakpoint: start at row 1 and span for 9 columns
 Demo
Item 1
Item 2
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '12 4@small 3@medium',
      row_start: '2 1@small',
      content: item_1,
    },
    {
      column_start: '1 5@small 4@medium',
      column_span: '12 8@small 9@medium',
      row_start: '1 1@small',
      content: item_2,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item row-start="2 1@small" column-start="1" column-span="12 4@small 3@medium">
    <!-- Item Content -->
  </bolt-grid-item>
  <bolt-grid-item row-start="1 1@small" column-start="1 5@small 4@medium" column-span="12 8@small 9@medium">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid item align variations

Grid Item Alignment Variations

The alignment must be set manually by using column start and column span, that way the user can position the item exactly as intended with the flexibility doing more than the common start, center, and end alignments.
Important Notes:

Example: To align an item to the end, set column start by using this formula: (12 - column_span) + 1.
Demo
Column start at 9 and span 4
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '9',
      column_span: '4',
      content: item_end,
    },
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item column-start="9" column-span="4">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid item valign variations

Grid Item Vertical Alignment Variations

Vertical alignment of an item can simply be defined by the valign prop.

 Demo
Item
Item
Item
Twig
{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      valign: 'end',
      ...
    }
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item valign="end">
    <!-- Item Content -->
  </bolt-grid-item>
</bolt-grid>

grid traditional columns and rows

Grid Traditional Columns and Rows
  1. Use a parent grid to create rows, each item span for 12 columns.
  2. Inside each item of the parent grid, pass a child grid to create columns.
 Demo
Item
Item
Item
Item
Item
Item
Twig
{% set row %}
  {% include '@bolt-layouts-grid/grid.twig' with {
    items: [
      {
        column_start: '1',
        column_span: '4',
        content: item,
      },
      {
        column_start: '5',
        column_span: '4',
        content: item,
      },
      {
        column_start: '9',
        column_span: '4',
        content: item,
      },
    ]
  } only %}
{% endset %}

{% include '@bolt-layouts-grid/grid.twig' with {
  items: [
    {
      column_start: '1',
      column_span: '12',
      row_start: '1',
      row_span: '1',
      content: row,
    },
    {
      column_start: '1',
      column_span: '12',
      row_start: '2',
      row_span: '1',
      content: row,
    }
  ]
} only %}
HTML
<bolt-grid>
  <bolt-grid-item row-start="1" row-span="1" column-start="1" column-span="12">
    <bolt-grid>
      <bolt-grid-item column-start="1" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="5" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="9" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
    </bolt-grid>
  </bolt-grid-item>
  <bolt-grid-item row-start="2" row-span="1" column-start="1" column-span="12">
    <bolt-grid>
      <bolt-grid-item column-start="1" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="5" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
      <bolt-grid-item column-start="9" column-span="4">
        <!-- Item Content -->
      </bolt-grid-item>
    </bolt-grid>
  </bolt-grid-item>
</bolt-grid>

holy grail docs

Holy Grail

A page layout with a sidebar on the left and another on the right.
Twig Usage 
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: 'Primary sidebar',
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: 'Secondary sidebar',
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: 'This is a holy grail layout.',
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
 Schema
Holy Grail (holy-grail.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content *

The main content area of the layout.

 any —
  • —
sidebar

The primary sidebar of the layout. Sidebar twig template is expected to be passed here.

 object —
  • —
secondary_sidebar

The secondary sidebar of the layout. Secondary sidebar twig template is expected to be passed here.

 object —
  • —
Holy Grail Sidebar (holy-grail-sidebar.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the primary sidebar.

 any —
  • —
trigger_icon

Set the icon of the trigger button that is shown in smaller viewports.

 string —
  • —
trigger_label

Set the text of the trigger button that is shown in smaller viewports.

 string —
  • —
Holy Grail Secondary Sidebar (holy-grail-secondary-sidebar.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
content

Render content of the secondary sidebar.

 any —
  • —
Install Install 
npm install @bolt/layouts-holy-grail
Dependencies @bolt/core @bolt/elements-icon js-cookie

holy grail

Basic Holy Grail Layout The Holy Grail layout renders a sidebar on the left and another on the right. It is a top level page layout.
Important Notes: The sidebars are sticky at and above the medium breakpoint.The primary sidebar transforms into a modal below the medium breakpoint. User can tap a trigger button to activate the modal. trigger_icon and trigger_label props are available for customizing the icon and label text in the trigger button.The secondary sidebar disappears entirely below the medium breakpoint. This sidebar is intended for non-essential information.Holy Grail layout should be used in tandem with Site layout. It would go into the main content area.Tech Doc is a great example of using Holy Grail layout, Site layout, Side Nav, Content Pagination, and Article element together. View demoRead more about holy grail layout on Wikipedia.
Demo
Primary sidebar
Secondary sidebar
This is a holy grail layout.
Twig
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: 'Primary sidebar',
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: 'Secondary sidebar',
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: 'This is a holy grail layout.',
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
HTML
Not available in plain HTML. Please use Twig.

holy grail use case navigation

Use Case: Navigation The Holy Grail layout is commonly used for documentation design where a page would display a book nav and a page level table of contents.
Important Notes: The primary sidebar works best with the Side Nav component. The secondary sidebar works best with the Table of Contents component.
Demo

Section One

This is a holy grail layout.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.

Section Two

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis harum placeat magni voluptas maiores iure explicabo magnam delectus et molestias tempore, dolore sed voluptate voluptatibus! Voluptas pariatur rerum quidem blanditiis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae atque molestias esse iusto laboriosam, repellendus voluptate adipisci consequatur consectetur? Fuga recusandae excepturi deleniti quo natus voluptas sequi, optio nemo aspernatur.

Item number Description Assemblies
Build 2.0.1.0 — SR-49969 SR-49941 This hotfix changes Updater requirements for .NET. If you are using Updater with 7.1 or 8.0 Robotic Automation Runtime clients, you now need to have both .NET 4.0 and .NET 3.5 installed. OpenSpan.UpdaterService.Remoting.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.Git.dll
OpenSpan.VersionFinder.exe
OpenSpan.UpdaterService.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.Initializer.exe
Build 1.1.360 — SR-44891 SR-44869 This hotfix changes the system to better handle long file names. It also enhances VersionFinder to sort the list of branches, making it easier to find a specific branch. OpenSpan.Updater.Git.dll
SR-43163 This hotfix adds a list of post-update tasks to the RuntimeConfig.xml file. These tasks are run after files that match a pattern you specify are updated. OpenSpan.Updater.Git.dll
OpenSpan.Updater.Initializer.exe
OpenSpan.Updater.InstallHelper.exe
OpenSpan.Updater.PrePostOperation.dll
OpenSpan.Updater.PreReqCheck.dll
OpenSpan.Updater.RuntimeLauncher.exe
OpenSpan.Updater.ScheduledTasks.dll
OpenSpan.Updater.ServerClientInterface.dll
OpenSpan.Updater.ServerClientInterface.Tester.exe
OpenSpan.Updater.UninstallHelper.exe
OpenSpan.Updater.UserHelper.exe
OpenSpan.Updater.X509tool.exe
OpenSpan.UpdaterService.Remoting.dll
OpenSpan.UpdaterService.exe
Build 1.1.354 — SR-44889 SR-44850 This hotfix changes Updater to avoid an exception that could prevent it from correctly populating branches. ManagedOpenSsl.dll
Twig
// Set up sidebar templates
{% set sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-sidebar.twig' with {
    content: side_nav,
    trigger_icon: 'documentation',
    trigger_label: 'Book Navigation',
    attributes: {
      class: 't-bolt-gray-xlight',
    },
  } only %}
{% endset %}
{% set secondary_sidebar %}
  {% include '@bolt-layouts-holy-grail/holy-grail-secondary-sidebar.twig' with {
    content: table_of_contents,
  } only %}
{% endset %}

// Pass sidebars to main template
{% include '@bolt-layouts-holy-grail/holy-grail.twig' with {
  content: content,
  sidebar: sidebar,
  secondary_sidebar: secondary_sidebar,
} only %}
HTML
Not available in plain HTML. Please use Twig.

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.

site docs

Site

The classic pancake stack site layout that enables the footer to be always positioned on the bottom.
Twig Usage 
{% include '@bolt-layouts-site/site.twig' with {
  header: 'This is the header.',
  main: {
    content: 'This is the main content.',
    attributes: {
      'data-foo': 'bar',
    }
  },
  footer: 'This is the footer.',
} only %}
 Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

 object —
  • —
header

The header of the site.

 any —
  • —
main

The main area of the site. This creates the <main> element.

 object —
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the <main> element.

      • —
    • content

      The main content of the site.

      • —
footer

The footer of the site.

 any —
  • —
Install Install 
npm install @bolt/layouts-site
Dependencies @bolt/core

site

Basic Site Layout Site layout renders the header, main, and footer landmarks of a page.
Important Notes: The content is already rendered inside a <main> element, do not pass another <main> element to the prop. The header and footer are freeform, the props are expecting <header> and <footer> elements repectively. The site layout must only contain <header>, <main>, and <footer> as immediate children. No additional elements can be a child. This is the replacement for the .c-bolt-site class.
Demo
This is the header.
This is the main content. The site layout is at least 100% of viewport height and the footer is always positioned on the bottom.
This is the footer.
Twig
{% include '@bolt-layouts-site/site.twig' with {
  header: '<header>This is the header.</header>',
  main: {
    content: 'This is the main content.',
    attributes: {
      id: 'main-content',
    }
  },
  footer: '<footer>This is the footer.</footer>',
} only %}
HTML
<div class="l-bolt-site">
  <header>
    // This is the header
  </header>
  <main id="main-content">
    // This is the main content
  </main>
  <footer>
    // This is the footer
  </footer>
</div>