List with Vertical Alignment Adjust the vertical alignment of List Items. Important Notes: The valign prop only works when the display prop is set to horizontal. Demo

Vertically align horizontal content: start

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: start

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal content: center

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: center

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal content: end

  • Item 1
  • Item 2
  • Item 3

Vertically align horizontal@medium content: end

  • Item 1
  • Item 2
  • Item 3
Twig
{% include '@bolt-elements-list/list.twig' with {
  valign: 'start',
  content: list_items
} only %}
HTML
<ul class="e-bolt-list e-bolt-list--valign-start">
  <li class="e-bolt-list__item">First item</li>
  <li class="e-bolt-list__item">Second item</li>
  <li class="e-bolt-list__item">Third item</li>
</ul>