Layout is in testing phaseConsult the design system team when using Layout.Read and understand the schema fully.Only use the Twig includes, do not use HTML for the time being.Use the side nav to view all Layout demos.

Layout

The foundational template of any given layout.
Twig Usage 
{% set content %}
  {% 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: content,
} only %}
 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
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".

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