Joran design system

Stack 

<h2 class="u-h2">Stack default</h2>
<div class="o-stack">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

<h2 class="u-h2">Stack small</h2>
<div class="o-stack o-stack--small">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

<h2 class="u-h2">Stack big</h2>
<div class="o-stack o-stack--big">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>
 
<h2 class="u-h2">Stack default</h2>
<div class="o-stack">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

<h2 class="u-h2">Stack small</h2>
<div class="o-stack o-stack--small">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

<h2 class="u-h2">Stack big</h2>
<div class="o-stack o-stack--big">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>
 
/* No context defined. */
  • Content: 
    /* ======================================================================
   # _objects.stack.css
   ====================================================================== */

.o-stack {
  --stack-space: 1.25rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  @screen print {
    --stack-space: 30pt;

    display: block;
  }
}

.o-stack > * {
  margin-top: 0;
  margin-bottom: 0;
}

.o-stack > * + * {
  margin-top: var(--stack-space);
}

/* -----------------------------------
 # Big
 ----------------------------------- */
.o-stack--big {
  --stack-space: 3rem;

  @media print {
    --stack-space: 60pt;
  }
}

@media not print {
  @screen md {
    .o-stack--big {
      --stack-space: 6rem;
    }
  }
}

/* -----------------------------------
 # Small
 ----------------------------------- */
.o-stack--small {
  --stack-space: 0.5rem;
}
  • URL: /components/raw/stack/_objects.stack.css
  • Filesystem Path: src/components/03-Objects/stack/_objects.stack.css
  • Size: 873 Bytes

Stack

The stack object provides flow and rhythm between direct sibling elements. Where –flow-space is not defined: the default value is 500 on the size scale.

This means that direct siblings inside of the .o-stack utility will have a margin-top of 1.25 rem.

By defining --stack-space in the CSS of either a child element of .o-stack, or on .o-stack itself: that value will be honoured in line with the cascade and specificity.