Spacers 

<div class="grid-container pl-spacer-l">
    <h2 class="pl-heading02">Small</h2>
    <p>Mobile: 10px - Desktop: 20px</p>
    <div class="grid-x pl-spacer pl-spacer-s">
        <div class="cell pl-spacer-s">
        </div>
    </div>
    <h2 class="pl-heading02">Medium</h2>
    <p>Mobile: 23px - Desktop: 46px</p>
    <div class="grid-x pl-spacer pl-spacer-s">
        <div class="cell pl-spacer-m">
        </div>
    </div>
    <h2 class="pl-heading02">Large</h2>
    <p>Mobile: 33px - Desktop: 66px</p>
    <div class="grid-x pl-spacer pl-spacer-s">
        <div class="cell pl-spacer-l">
        </div>
    </div>
    <h2 class="pl-heading02">Extra Large</h2>
    <p>Mobile: 46px - Desktop: 92px</p>
    <div class="grid-x pl-spacer pl-spacer-s">
        <div class="cell pl-spacer-xl">
        </div>
    </div>
</div>
 
<div class="grid-container pl-spacer-l">
    {{#each spacers}}
        <h2 class="pl-heading02">{{name}}</h2>
        <p>{{description}}</p>
        <div class="grid-x pl-spacer pl-spacer-s">
            <div class="cell {{class}}">
            </div>
        </div>
    {{/each}}
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "spacers": [
    {
      "name": "Small",
      "description": "Mobile: 10px - Desktop: 20px",
      "class": "pl-spacer-s"
    },
    {
      "name": "Medium",
      "description": "Mobile: 23px - Desktop: 46px",
      "class": "pl-spacer-m"
    },
    {
      "name": "Large",
      "description": "Mobile: 33px - Desktop: 66px",
      "class": "pl-spacer-l"
    },
    {
      "name": "Extra Large",
      "description": "Mobile: 46px - Desktop: 92px",
      "class": "pl-spacer-xl"
    }
  ]
}

No notes defined.