1 #auto-cols Auto cols

Use this component when you want to conditionally display two fields in the same row, in desktop, large screens. It shows the two blocks on the same row, half of the available width each but, when one of the blocks is missing, the remaining field takes 100% of the width. If the block contains a listing the items inside the blocks get also re-organized in a two columns layout.

Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.

Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.
Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.

.auto-cols--6-6

Auto cols (6 cols left, 6 right)

Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.
Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.

.auto-cols--8-4

Auto cols (8 cols left, 4 right)

Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.
Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.

.auto-cols--4-8

Auto cols (4 cols left, 8 right)

Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.
Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.

.auto-cols--9-3

Auto cols (9 cols left, 3 right)

Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.
Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.

.auto-cols--3-9

Auto cols (3 cols left, 9 right)

Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.
Horizon 2020 health research funding

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.

<div class="auto-cols [modifier class]">
  <div class="auto-cols__col">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus. Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci. Nunc et gravida ipsum, eu ultrices magna. Donec sit amet leo nec orci iaculis faucibus in quis sapien. Sed ut massa non libero interdum tempor vel at sapien. Quisque eros mi, cursus et cursus non, rutrum nec mauris. Etiam hendrerit ante nisl, at fermentum mauris blandit pharetra.</p>
  </div>
  <div class="auto-cols__col">
    <ul class="listing listing--title">
      <li class="listing__item">
        <h3 class="listing__title">
          <a href="#">Horizon 2020 health research funding</a>
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus.
          Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.</p>
      </li>
      <li class="listing__item">
        <h3 class="listing__title">
          <a href="#">Horizon 2020 health research funding</a>
        </h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ornare massa quis turpis ultricies faucibus.
          Mauris tincidunt posuere arcu et scelerisque. Donec ac libero venenatis, ornare enim ac, vulputate orci.</p>
      </li>
    </ul>
  </div>
</div>