Concord
InfoComponentsUtilities

Wrap

Container that wraps its children using flexbox.

Layout

The Wrap component is a flex container. It spaces its children a fixed distance from each other, wrapping them onto new lines as needed.

When you want elements to spread out to fill the available space and be centered within the container, use the Distribute component instead. When you don't want elements to wrap, use the Stack component instead.

1
2
3
4
5
HTMLCopied!
<div class="example wrap" style="width: 16rem">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</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="wrap 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="wrap 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="wrap 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="wrap 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="wrap 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="wrap 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="wrap 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="wrap 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="wrap 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="wrap vertical example">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>