Columns

• Responsive
• Column count modifier
• Column gap modifier
• Column rule modifier

Responsive

This component is responsive, which means that every modifier may be applied using classes or shorthand attribute on specified screen sizes.

<!-- Design tokens with classes -->
<element class="[MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME1] [MOD_PREFIX]-[MOD_NAME]-[SCR_SIZE_NAME2]"></element>
<!-- Example with two columns modifier applied only on sm and md screen sizes -->
<div class="my-columns mod-2-sm mod-2-md"></div>
<!-- Example with spacing between columns modifier applied only on sm and md screen sizes -->
<div class="my-columns mod-gap-xl-sm mod-gap-xl-md"></div>

<!-- Design tokens with attribute shorthand -->
<element [MOD_PREFIX]-[MOD_NAME]="[SCR_SIZE_NAME1],[SCR_SIZE_NAME2],etc"></element>
<!-- Example with two columns modifier applied only on sm and md screen sizes -->
<div class="my-columns" mod-2="sm,md"></div>
<!-- Example with spacing between columns modifier applied only on sm and md screen sizes -->
<div class="my-columns" mod-gap-xl="sm,md"></div>

Column count modifier

Default column amount is 3. Columns component supports up to 5 columns. This component is responsive.

<p class="my-columns mod-2">Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>
<p class="my-columns">Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>
<p class="my-columns mod-4">Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>
<p class="my-columns mod-5">Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut. Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>

<!-- DEMO ONLY -->
<style>
    body { padding: 20px; }
    p+p { margin-top: 40px; }
</style>

Column gap modifier

Column gap modifier affects the spacing between columns. This component is responsive.

<p class="my-columns"><strong>Default gap</strong> Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>
<p class="my-columns mod-gap-xl"><strong>xl gap</strong> Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>
<p class="my-columns mod-gap-xxl"><strong>xxl gap</strong> Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>

<!-- DEMO ONLY -->
<style>
    body { padding: 20px; }
    p+p { margin-top: 40px; }
</style>

Column rule modifier

Column gap modifier affects the separating line style between columns. This component is responsive.

<p class="my-columns"><strong>Default rule</strong> Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>
<p class="my-columns mod-rule-thin-primary"><strong>xl gap</strong> Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>
<p class="my-columns mod-rule-thin-translucid"><strong>xxl gap</strong> Sed eos dolores erat erat elitr consetetur tempor aliquyam dolor stet, diam lorem ut sed sit. Sit tempor gubergren sanctus sea, sanctus elitr ipsum duo clita rebum kasd, aliquyam ut.</p>

<!-- DEMO ONLY -->
<style>
    body { padding: 20px; }
    p+p { margin-top: 40px; }
</style>