This layout is in a testing phase, do not use any code examples from the docs for production sites.
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>