Bolt Design System

Vertical Alignment

A group of layout items can be vertically aligned to the start, center, or end.

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

Vertically aligned end

Short item

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>