Stack

Common stack layout partial

Class Type
stack Stack Container A class representing a stack container
1
2
3
<div class="stack">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Direction

The direction of the stack.

Property attribute Type Default
direction data-direction vertical,horizontal vertical
1
2
3
<div class="stack" data-direction="horizontal">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Defining spacing

The space injected between components.

Property attribute Type Default
gap data-gap none,xs,s,m,l,xl,xxl m
1
2
3
<div class="stack" data-direction="horizontal" data-gap="s">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Defining custom spacing

Other options to define custom gap is using directly the CSS variable of gap

CSS Custom Property Description Default
--stack-gap Controls the spacing between items, using our spacing tokens var(--stack-gap-m)
1
2
3
<div class="stack" data-direction="horizontal" style="--stack-gap:1.5rem">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

Align items

How to align the child items inside the stack.

Property attribute Type Default
align-items data-align-items streatch,start,end,center,text streatch
content
two line content.
All boxes aligned center
content
<div class="stack" data-direction="horizontal" data-align-items="center">
  <div class="box">content</div>
  <div class="box">
    two line content.
    <br />
    All boxes aligned center
  </div>
  <div class="box">content</div>
</div>

justify Content

How to justify the child items inside the stack.

Property attribute Type Default
justify-content data-djustify-content start,end,center,space-evenly,space-around,space-between start
content
two
line content. All boxes aligned center
content
<div class="stack" data-direction="horizontal" data-justify-content="center">
  <div class="box">content</div>
  <div class="box">
    two
    <br />
    line content. All boxes aligned center
  </div>
  <div class="box">content</div>
</div>

Wrap

Defines whether the Stack items are forced in a single line or can be flowed into multiple lines.

Property attribute Type Default
wrap data-wrap false,true false
content
long content
content
long content
content
long content
content
long content
content
<div class="stack" data-direction="horizontal" data-wrap="true">
  <div class="box">content</div>
  <div class="box">long content</div>
  <div class="box">content</div>
  <div class="box">long content</div>
  <div class="box">content</div>
  <div class="box">long content</div>
  <div class="box">content</div>
  <div class="box">long content</div>
  <div class="box">content</div>
</div>