Modules

Row

This module helps to arrange the elements in the row with the gap between them.

Usage #

To build a row, you need to specify two classes: row and row-{size}. The {size} in row is based on the Spacing scale. So using any spacing value you can set the gap between elements.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<div class="row row-6">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

If items exceed the width of the row container, they are moved to a new line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<div class="row row-4">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

The row module works with different elements. For example with text elements by separating them with a distance.

Label Text Caption

<div class="row row-4 flex-baseline">
    <span class="label">Label</span>
    <span>Text</span>
    <span class="caption caption-positive caption-caps">Caption</span>
</div>

Note: Use the flex-baseline modifiers to align text items to the baseline of the row.

Overflow #

Using the flex-overflow modifier you can make the elements overflow the row so that they can be scrolled horizontally in it.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<div class="row row-6 flex-overflow">
    <div class="card">...</div>
    <div class="card">...</div>
    ...
</div>