UI MarCom

Multi-column Stable

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

Long paragraph

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.

<div class="multi-column multi-column-lg-2">
  <p>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.</p>
</div>

Multiple items

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
<div class="multi-column multi-column-lg-2">
  <div class="multi-column__item">
    <span class="font-size-small color-gray">Equipment name</span><br>Alpha Beta XYZ Equipment
  </div>
  <div class="multi-column__item">
    <span class="font-size-small color-gray">Equipment ID</span><br>XYZ-01
  </div>
  <div class="multi-column__item">
    <span class="font-size-small color-gray">Start date</span><br>03/11/2020, 18:00
  </div>
  <div class="multi-column__item">
    <span class="font-size-small color-gray">End date</span><br><span>03/11/2018, 18:00</span>
  </div>
  <div class="multi-column__item">
    <span class="font-size-small color-gray">Department</span><br>Radiology
  </div>
  <div class="multi-column__item">
    <span class="font-size-small color-gray">Street</span><br>Road A
  </div>
  <div class="multi-column__item">
    <span class="font-size-small color-gray">City</span><br>Town B
  </div>
</div>