skip to content

Stack

Use the Stack to inject margin between adjacent elements along a vertical axis. This is preferred to adding margin directly to individual elements because the need for margin is a question of context.

You will more than likely want to use a Stack when dealing with any kind of flow content.

Value Markup Demo
$ss5 (0.625rem) 
<div class="ds-stack-smallest">
  <div>First element</div>
  <div>Next element</div>
</div>
First element
Next element
$s3 (1.5625rem) 
<div class="ds-stack-smaller">
  <div>First element</div>
  <div>Next element</div>
</div>
First element
Next element
$s6 (3.0517578125rem) 
<div class="ds-stack">
  <div>First element</div>
  <div>Next element</div>
</div>
First element
Next element
$s8 (4.768371582rem) 
<div class="ds-stack-larger">
  <div>First element</div>
  <div>Next element</div>
</div>
First element
Next element