Spacers 

<div class="grid-container">
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">10 px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-xxs">
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">20 px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-xs">
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">30 px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-sm">
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">40 px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-md">
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">60 px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-lg">
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">80 px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-xl">
                </div>
            </div>
        </div>
    </div>
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">120 px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-xxl">
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="grid-container">
    {{#each spacers}}
    <div class="grid-x">
        <div class="col medium-1 sg-typography-cell">
            <div class="sg-typography-name">{{height}} px</div>
        </div>
        <div class="col medium-10 sg-typography-cell">
            <div class="grid-x sg-spacer">
                <div class="cell spacer-{{class}}">
            </div>
        </div>
        </div>
    </div>
    {{/each}}
</div>
 
{
  "spacers": [
    {
      "name": "spacer-xxs",
      "class": "xxs",
      "height": 10
    },
    {
      "name": "spacer-xs",
      "class": "xs",
      "height": 20
    },
    {
      "name": "spacer-sm",
      "class": "sm",
      "height": 30
    },
    {
      "name": "spacer-md",
      "class": "md",
      "height": 40
    },
    {
      "name": "spacer-lg",
      "class": "lg",
      "height": 60
    },
    {
      "name": "spacer-xl",
      "class": "xl",
      "height": 80
    },
    {
      "name": "spacer-xxl",
      "class": "xxl",
      "height": 120
    }
  ]
}

There are no notes for this item.