UI MarCom

Multi-column Stable

The multi-column feature flows content into two columns on a large viewport.

General guidance

In contrast to the grid system the textual flow remains intact and is spread evenly across the columns. The multi-column item groups its child elements to prevent getting split onto a new column.

Structure

Multi Column structure
Multi Column structure
  1. Text (column 1) Mandatory
  2. Text (column 2) Mandatory

Long paragraph

With the help of the Multi-column component long texts can flow over 2 columns.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam quod iure consectetur ratione, voluptatem cupiditate dicta doloribus dolores a officia et delectus aspernatur cumque repudiandae, sapiente illo sunt non ducimus! Veritatis reiciendis, aspernatur eum, ratione rerum magnam at eaque cupiditate laborum consectetur repellat minima enim necessitatibus fugit similique quisquam tempore dolore autem! Eaque, non sunt. Dolorem cumque officia natus odio ea quisquam perspiciatis aliquid eligendi, dicta, magni debitis vitae animi. Ipsam dolorem fuga veritatis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas tempora velit eligendi architecto et aut est debitis ratione minus. Sint voluptate incidunt quaerat tenetur possimus. Blanditiis natus impedit ullam obcaecati.

Multiple items

It is also possible to prevent a column break inside certain content blocks.

Equipment name
Alpha Beta XYZ Equipment
Equipment ID
XYZ-01
Start date
03/11/2020, 18:00
End date
03/11/2018, 18:00
Department
Radiology
Street
Road A
City
Town B