Stack Utility

Our stack utility is constructed as follows:

.stack {
  display: flex;
  gap: var(--size-400);
  flex-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;
}