Origami Frontend Components & Services

Demos: o-spacing

Named Spaces

This demo visuallies the size of named spaces. It shows a square for each named space, which has a width and height equal to the space size. See the readme for more information on space sizes.

<div class="demo-named-spaces-container">
      <div class="demo-named-space demo-named-space--s1">
        <span class="demo-named-space__name">s1</span>
        <span class="demo-named-space__value">4px</span>
      </div>

      <div class="demo-named-space demo-named-space--s2">
        <span class="demo-named-space__name">s2</span>
        <span class="demo-named-space__value">8px</span>
      </div>

      <div class="demo-named-space demo-named-space--s3">
        <span class="demo-named-space__name">s3</span>
        <span class="demo-named-space__value">12px</span>
      </div>

      <div class="demo-named-space demo-named-space--s4">
        <span class="demo-named-space__name">s4</span>
        <span class="demo-named-space__value">16px</span>
      </div>

      <div class="demo-named-space demo-named-space--s6">
        <span class="demo-named-space__name">s6</span>
        <span class="demo-named-space__value">24px</span>
      </div>

      <div class="demo-named-space demo-named-space--s8">
        <span class="demo-named-space__name">s8</span>
        <span class="demo-named-space__value">32px</span>
      </div>

      <div class="demo-named-space demo-named-space--m12">
        <span class="demo-named-space__name">m12</span>
        <span class="demo-named-space__value">48px</span>
      </div>

      <div class="demo-named-space demo-named-space--m16">
        <span class="demo-named-space__name">m16</span>
        <span class="demo-named-space__value">64px</span>
      </div>

      <div class="demo-named-space demo-named-space--l18">
        <span class="demo-named-space__name">l18</span>
        <span class="demo-named-space__value">72px</span>
      </div>

      <div class="demo-named-space demo-named-space--l24">
        <span class="demo-named-space__name">l24</span>
        <span class="demo-named-space__value">96px</span>
      </div>
    </div>

Utility Classes

<div class="o-spacing-s1"></div>
    <div class="o-spacing-s2"></div>
    <div class="o-spacing-s3"></div>
    <div class="o-spacing-s4"></div>
    <div class="o-spacing-s6"></div>
    <div class="o-spacing-s8"></div>
    <div class="o-spacing-m12"></div>
    <div class="o-spacing-m16"></div>
    <div class="o-spacing-l18"></div>
    <div class="o-spacing-l24"></div>
Status
active
Switch component view

GitHub Repository

Install o-spacing

If using the Build Service, add o-spacing@^3.0.0 to your link tag.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-spacing@^3.0.0".

Help & Support

o-spacing is maintained directly by the Origami team. If you have any questions about o-spacing or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com