<table class="dst-table">
<thead>
<tr>
<th>SCSS</th>
<th>Value</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>spacing(space-1)</code></td>
<td>1px</td>
<td>
<div class="space space--space-1"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-2)</code></td>
<td>2px</td>
<td>
<div class="space space--space-2"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-4)</code></td>
<td>4px</td>
<td>
<div class="space space--space-4"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-6)</code></td>
<td>6px</td>
<td>
<div class="space space--space-6"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-8)</code></td>
<td>8px</td>
<td>
<div class="space space--space-8"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-10)</code></td>
<td>10px</td>
<td>
<div class="space space--space-10"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-12)</code></td>
<td>12px</td>
<td>
<div class="space space--space-12"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-14)</code></td>
<td>14px</td>
<td>
<div class="space space--space-14"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-16)</code></td>
<td>16px</td>
<td>
<div class="space space--space-16"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-20)</code></td>
<td>20px</td>
<td>
<div class="space space--space-20"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-24)</code></td>
<td>24px</td>
<td>
<div class="space space--space-24"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-28)</code></td>
<td>28px</td>
<td>
<div class="space space--space-28"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-32)</code></td>
<td>32px</td>
<td>
<div class="space space--space-32"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-36)</code></td>
<td>36px</td>
<td>
<div class="space space--space-36"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-40)</code></td>
<td>40px</td>
<td>
<div class="space space--space-40"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-44)</code></td>
<td>44px</td>
<td>
<div class="space space--space-44"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-48)</code></td>
<td>48px</td>
<td>
<div class="space space--space-48"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-56)</code></td>
<td>56px</td>
<td>
<div class="space space--space-56"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-64)</code></td>
<td>64px</td>
<td>
<div class="space space--space-64"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-80)</code></td>
<td>80px</td>
<td>
<div class="space space--space-80"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-96)</code></td>
<td>96px</td>
<td>
<div class="space space--space-96"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-112)</code></td>
<td>112px</td>
<td>
<div class="space space--space-112"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-128)</code></td>
<td>128px</td>
<td>
<div class="space space--space-128"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-144)</code></td>
<td>144px</td>
<td>
<div class="space space--space-144"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-160)</code></td>
<td>160px</td>
<td>
<div class="space space--space-160"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-176)</code></td>
<td>176px</td>
<td>
<div class="space space--space-176"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-192)</code></td>
<td>192px</td>
<td>
<div class="space space--space-192"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-208)</code></td>
<td>208px</td>
<td>
<div class="space space--space-208"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-224)</code></td>
<td>224px</td>
<td>
<div class="space space--space-224"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-240)</code></td>
<td>240px</td>
<td>
<div class="space space--space-240"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-256)</code></td>
<td>256px</td>
<td>
<div class="space space--space-256"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-288)</code></td>
<td>288px</td>
<td>
<div class="space space--space-288"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-320)</code></td>
<td>320px</td>
<td>
<div class="space space--space-320"></div>
</td>
</tr>
<tr>
<td><code>spacing(space-384)</code></td>
<td>384px</td>
<td>
<div class="space space--space-384"></div>
</td>
</tr>
</tbody>
</table>
<table class="dst-table">
<thead>
<tr>
<th>SCSS</th>
<th>Value</th>
<th>Example</th>
</tr>
</thead>
<tbody>
{% for spacing in spacings %}
<tr>
<td><code>spacing({{spacing.name}})</code></td>
<td>{{ spacing.value }}</td>
<td>
<div class="space space--{{spacing.name}}"></div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{
"spacings": [
{
"name": "space-1",
"value": "1px"
},
{
"name": "space-2",
"value": "2px"
},
{
"name": "space-4",
"value": "4px"
},
{
"name": "space-6",
"value": "6px"
},
{
"name": "space-8",
"value": "8px"
},
{
"name": "space-10",
"value": "10px"
},
{
"name": "space-12",
"value": "12px"
},
{
"name": "space-14",
"value": "14px"
},
{
"name": "space-16",
"value": "16px"
},
{
"name": "space-20",
"value": "20px"
},
{
"name": "space-24",
"value": "24px"
},
{
"name": "space-28",
"value": "28px"
},
{
"name": "space-32",
"value": "32px"
},
{
"name": "space-36",
"value": "36px"
},
{
"name": "space-40",
"value": "40px"
},
{
"name": "space-44",
"value": "44px"
},
{
"name": "space-48",
"value": "48px"
},
{
"name": "space-56",
"value": "56px"
},
{
"name": "space-64",
"value": "64px"
},
{
"name": "space-80",
"value": "80px"
},
{
"name": "space-96",
"value": "96px"
},
{
"name": "space-112",
"value": "112px"
},
{
"name": "space-128",
"value": "128px"
},
{
"name": "space-144",
"value": "144px"
},
{
"name": "space-160",
"value": "160px"
},
{
"name": "space-176",
"value": "176px"
},
{
"name": "space-192",
"value": "192px"
},
{
"name": "space-208",
"value": "208px"
},
{
"name": "space-224",
"value": "224px"
},
{
"name": "space-240",
"value": "240px"
},
{
"name": "space-256",
"value": "256px"
},
{
"name": "space-288",
"value": "288px"
},
{
"name": "space-320",
"value": "320px"
},
{
"name": "space-384",
"value": "384px"
}
]
}
No notes defined.