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>

Usage Demos

Grid Header example (replacement)

Databases

<header
  class="stack"
  data-direction="horizontal"
  data-align-items="center"
  data-justify-content="space-between"
  data-wrap="true"
>
  <h2 class="heading-level-5 u-trim-1">Databases</h2>
  <div class="stack" data-direction="horizontal" data-wrap="true">
    <button class="button is-secondary" type="button">
      <span class="icon-view-boards u-opacity-50" aria-hidden="true" aria-label="columns"></span>
      <span class="text is-only-desktop">Columns</span>
      <span class="inline-tag">4</span>
    </button>
    <div class="toggle-button">
      <ul class="toggle-button-list">
        <li class="toggle-button-item">
          <button class="toggle-button-element is-selected" aria-label="List View" type="button">
            <span class="icon-view-list" aria-hidden="true"></span>
          </button>
        </li>
        <li class="toggle-button-item">
          <button class="toggle-button-element" aria-label="Grid View" type="button">
            <span class="icon-view-grid" aria-hidden="true"></span>
          </button>
        </li>
      </ul>
    </div>
    <button class="button is-full-width-in-stack-mobile" type="button">
      <span class="icon-plus" aria-hidden="true"></span>
      <span class="text">Create database</span>
    </button>
  </div>
</header>