Stack

This module helps to arrange the cards vertically with the bottom spacing between them.

Usage #

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


<div class="stack stack-4">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

This works well, for example, for vertical card stacking.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


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

Divider #

Elements in a stack can be separated not only by space, but also by dividers. This is possible by specifying the stack-{border-color} class, where {border-color} is the color from the Border helper.


<div class="stack stack-8 stack-dark-mid">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>