Bolt Design System

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%

67%

75%

25%

75%

25%

50%

25%

50%

25%

50%

Traditional

halves

thirds

fourths

Special

flag media

flag content

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>