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.
<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.
<div class="row row-4 flex-baseline">
<span class="tag">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>