Skip to Main Content
Concord
InfoComponentsUtilities
GitHubNPM

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.

To create one, use the class cd-stack on a container element.

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 cd-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>

Spacing

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

  • cd-spacing-none
  • cd-spacing-densest
  • cd-spacing-denser
  • cd-spacing-dense
  • cd-spacing-normal (default)
  • cd-spacing-sparse
  • cd-spacing-sparser
  • cd-spacing-sparsest

None

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">None</h3>
<div class="cd-stack cd-spacing-none example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Densest</h3>
<div class="cd-stack cd-spacing-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="cd-stack cd-spacing-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="cd-stack cd-spacing-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="cd-stack example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<h3 class="h6">Sparse</h3>
<div class="cd-stack cd-spacing-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="cd-stack cd-spacing-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="cd-stack cd-spacing-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:

  • cd-orientation-horizontal (default): elements are laid out along the x-axis
  • cd-orientation-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="cd-stack cd-orientation-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="cd-stack cd-orientation-vertical example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>