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 structure works with different elements. For example with text elements by separating them with a distance.

Label Text Link

<div class="row row-4 flex-baseline">
    <span class="label">Label</span>
    <span>Text</span>
    <a href="#">Link</a>
</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>

Responsive #

Use the row-column-sm modifier to set a vertical (column) direction on small screens.


<div class="row row-2 row-column-sm">
    <button class="button button-primary">Save</button>
    <button class="button">Cancel</button>
</div>

Use the row-{size}-sm modifiers to set the gap on on small screens.


<div class="row row-2 row-8-sm row-column-sm">
    <button class="button button-primary">Save</button>
    <button class="button">Cancel</button>
</div>