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
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
Main axis aligned center
content
<div class="stack" data-direction="horizontal" data-justify-content="center">
<div class="box">content</div>
<div class="box">Main axis 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 examples (replacement for older partial)
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>
Messages
<div class="stack">
<h2 class="heading-level-5 u-trim-1">Messages</h2>
<div
class="stack"
data-direction="horizontal"
data-justify-content="space-between"
data-wrap="true"
>
<div class="input-text-wrapper is-with-end-button u-flex-basis-400">
<input
placeholder="Search by message ID, description, type, or status"
type="search"
class="input-text"
/>
<span class="icon-search" aria-hidden="true"></span>
</div>
<div class="stack" data-direction="horizontal" data-wrap="true">
<div class="stack" data-direction="horizontal">
<button class="button is-secondary" type="button">
<span class="icon-filter u-opacity-50" aria-hidden="true"></span>
<span class="">Filters</span>
</button>
<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">Columns</span>
<span class="inline-tag">6</span>
</button>
</div>
<button class="button is-full-width-in-stack-mobile" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Create message</span>
</button>
</div>
</div>
</div>