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.

Published Last updated: 5.5.0 Change log Github NPM
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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
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
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
    • shape_group

      Add a Bolt Background Shapes group.

      • A, B, none
    • shape_alignment

      Alignment of shape group.

      • left or right
    • fill

      Type of fill to use for the overlay.

      • color, gradient, linear-gradient, radial-gradient
    • fill_color

      Color of the fill to use in the overlay.

      • default, pink, navy, black
    • focal_point

      Where the opacity background should originate.

        • horizontal

          Currently only reverses gradient on 'left'.

          • center, left, right
    • items

      An array of renderable items to place in the background.

      • [items]:
        • Type:any
    • overlay

      Use opacity instead

      • —
    • shapeGroup

      Use shape_group instead.

      • —
    • shapeAlignment

      Use shape_alignment instead.

      • —
    • fillColor

      Use fill_color instead.

      • —
    • focalPoint

      Use focal_point instead.

      • —
    • contentItems

      Use content_items instead.

      • —
    • content_items

      Use items instead (each item must be renderable, e.g. a string or render array. Arrays inteded to be rendered with pattern_template() are no longer supported)

      • —
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-v3.x