{% 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 %}
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]
| — |
|
gutter
|
Set the horizontal spacing in between layout items. |
string
|
medium
|
|
row_gutter
|
Set the vertical spacing in between layout items. |
string
|
medium
|
|
padding_top
|
Set the top padding of the layout. |
string
|
medium
|
|
padding_bottom
|
Set the bottom padding of the layout. |
string
|
medium
|
|
align_items
|
Control the horizontal alignment of all layout items. |
string
|
center
|
|
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
| — |
|
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
| — |
|
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
| — |
|
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]
| — |
|
npm install @bolt/layouts-layout