Concord
InfoComponentsUtilities

Stack

Container that displays components in a line using flexbox.

Layout

The Stack component is a flex container. It spaces its children a fixed distance from each other without wrapping.

If you want elements to wrap onto new lines as needed, use the Wrap or Distribute components instead.

1
2
3
4
HTMLCopied!
<div class="example stack" style="width: 16rem">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Density

You can optionally add one of the following modifier classes to change the spacing between children (ordered from most compact to most spread out):

  • no-gap
  • densest
  • denser
  • dense
  • normal (default)
  • sparse
  • sparser
  • sparsest

No Gap

1
2
3

Densest

1
2
3

Denser

1
2
3

Dense

1
2
3

Normal

1
2
3

Sparse

1
2
3

Sparser

1
2
3

Sparsest

1
2
3
HTMLCopied!
<h3 class="h6">No Gap</h3>
<div class="stack no-gap example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Densest</h3>
<div class="stack densest example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Denser</h3>
<div class="stack denser example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Dense</h3>
<div class="stack dense example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Normal</h3>
<div class="stack normal example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparse</h3>
<div class="stack sparse example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparser</h3>
<div class="stack sparser example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparsest</h3>
<div class="stack sparsest example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Orientation

You can optionally add one of the following modifier classes to change the axis along which the children are laid out:

  • horizontal (default): elements are laid out along the x-axis
  • vertical: elements are laid out along the y-axis

Horizontal

1
2
3

Vertical

1
2
3
HTMLCopied!
<h3 class="h6">Horizontal</h3>
<div class="stack horizontal example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Vertical</h3>
<div class="stack vertical example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>