Stack Utility

Our stack utility is constructed as follows:

.stack {
display: flex;
align-items: var(--stack-align);
justify-content: var(--stack-justify);
gap: var(--gutter, var(--size-400));
flex-direction: var(--stack-direction);
flex-wrap: var(--stack-wrap, wrap);
}

Purpose

Our stack utility is for flex-based layouts to save repeating the same lines of code. It allows developers to create horizontal or vertical stacks.

Example

<ul class="[ card-stack ] [ stack ]"></ul>
.card-stack {
--gutter: 2rem;
--stack-align: center;
--stack-justify: space-between;
}