Object | Padding

Padding All

.padding--xs
.padding--sm
.padding--md
.padding--lg
.padding--xl
HTML 
<div class="">
            
            <div class="ss-c-demo__box padding--xs">
                <code>.padding--xs</code>
            </div>
            
            <div class="ss-c-demo__box padding--sm">
                <code>.padding--sm</code>
            </div>
            
            <div class="ss-c-demo__box padding--md">
                <code>.padding--md</code>
            </div>
            
            <div class="ss-c-demo__box padding--lg">
                <code>.padding--lg</code>
            </div>
            
            <div class="ss-c-demo__box padding--xl">
                <code>.padding--xl</code>
            </div>
            
        </div>

Padding Sides

.padding--md_top
.padding--xl_top
.padding--md_right
.padding--xl_right
.padding--md_bottom
.padding--xl_bottom
.padding--md_left
.padding--xl_left
HTML 
<div class="">
            
            <div class="ss-c-demo__box padding--md_top">
                <code>.padding--md_top</code>
            </div>
            <div class="ss-c-demo__box padding--xl_top">
                <code>.padding--xl_top</code>
            </div>
            
            <div class="ss-c-demo__box padding--md_right">
                <code>.padding--md_right</code>
            </div>
            <div class="ss-c-demo__box padding--xl_right">
                <code>.padding--xl_right</code>
            </div>
            
            <div class="ss-c-demo__box padding--md_bottom">
                <code>.padding--md_bottom</code>
            </div>
            <div class="ss-c-demo__box padding--xl_bottom">
                <code>.padding--xl_bottom</code>
            </div>
            
            <div class="ss-c-demo__box padding--md_left">
                <code>.padding--md_left</code>
            </div>
            <div class="ss-c-demo__box padding--xl_left">
                <code>.padding--xl_left</code>
            </div>
            
        </div>

Padding Axes

.padding--sm_vertical
.padding--md_vertical
.padding--xl_vertical
.padding--sm_horizontal
.padding--md_horizontal
.padding--xl_horizontal
HTML 
<div class="">
            
            <div class="ss-c-demo__box padding--sm_vertical">
                <code>.padding--sm_vertical</code>
            </div>
            <div class="ss-c-demo__box padding--md_vertical">
                <code>.padding--md_vertical</code>
            </div>
            <div class="ss-c-demo__box padding--xl_vertical">
                <code>.padding--xl_vertical</code>
            </div>
            
            <div class="ss-c-demo__box padding--sm_horizontal">
                <code>.padding--sm_horizontal</code>
            </div>
            <div class="ss-c-demo__box padding--md_horizontal">
                <code>.padding--md_horizontal</code>
            </div>
            <div class="ss-c-demo__box padding--xl_horizontal">
                <code>.padding--xl_horizontal</code>
            </div>
            
        </div>

Mixed Examples

.padding--md
.padding--md_vertical
.padding--sm_horizontal
.padding--lg_left
HTML 
<div class="ss-c-demo__stack">
            <div class="ss-c-demo__box ss-c-padding--md">
                <code>.padding--md</code>
            </div>
            <div class="ss-c-demo__box ss-c-padding--md_vertical">
                <code>.padding--md_vertical</code>
            </div>
            <div class="ss-c-demo__box ss-c-padding--sm_horizontal">
                <code>.padding--sm_horizontal</code>
            </div>
            <div class="ss-c-demo__box ss-c-padding--lg_left">
                <code>.padding--lg_left</code>
            </div>
        </div>

Numeric Padding (q: 1–1000)

All Sides

.padding--1
.padding--4
.padding--8
.padding--12
.padding--16
.padding--24
.padding--32
.padding--48
.padding--64
HTML 
<div class="">
            
            <div class="ss-c-demo__box padding--1">
                <code>.padding--1</code>
            </div>
            
            <div class="ss-c-demo__box padding--4">
                <code>.padding--4</code>
            </div>
            
            <div class="ss-c-demo__box padding--8">
                <code>.padding--8</code>
            </div>
            
            <div class="ss-c-demo__box padding--12">
                <code>.padding--12</code>
            </div>
            
            <div class="ss-c-demo__box padding--16">
                <code>.padding--16</code>
            </div>
            
            <div class="ss-c-demo__box padding--24">
                <code>.padding--24</code>
            </div>
            
            <div class="ss-c-demo__box padding--32">
                <code>.padding--32</code>
            </div>
            
            <div class="ss-c-demo__box padding--48">
                <code>.padding--48</code>
            </div>
            
            <div class="ss-c-demo__box padding--64">
                <code>.padding--64</code>
            </div>
            
        </div>

Sides

.padding--24_top
.padding--48_top
.padding--24_right
.padding--48_right
.padding--24_bottom
.padding--48_bottom
.padding--24_left
.padding--48_left
HTML 
<div class="">
            
            <div class="ss-c-demo__box padding--24_top">
                <code>.padding--24_top</code>
            </div>
            <div class="ss-c-demo__box padding--48_top">
                <code>.padding--48_top</code>
            </div>
            
            <div class="ss-c-demo__box padding--24_right">
                <code>.padding--24_right</code>
            </div>
            <div class="ss-c-demo__box padding--48_right">
                <code>.padding--48_right</code>
            </div>
            
            <div class="ss-c-demo__box padding--24_bottom">
                <code>.padding--24_bottom</code>
            </div>
            <div class="ss-c-demo__box padding--48_bottom">
                <code>.padding--48_bottom</code>
            </div>
            
            <div class="ss-c-demo__box padding--24_left">
                <code>.padding--24_left</code>
            </div>
            <div class="ss-c-demo__box padding--48_left">
                <code>.padding--48_left</code>
            </div>
            
        </div>

Axes

.padding--12_vertical
.padding--32_vertical
.padding--64_vertical
.padding--12_horizontal
.padding--32_horizontal
.padding--64_horizontal
HTML 
<div class="">
            
            <div class="ss-c-demo__box padding--12_vertical">
                <code>.padding--12_vertical</code>
            </div>
            <div class="ss-c-demo__box padding--32_vertical">
                <code>.padding--32_vertical</code>
            </div>
            <div class="ss-c-demo__box padding--64_vertical">
                <code>.padding--64_vertical</code>
            </div>
            
            <div class="ss-c-demo__box padding--12_horizontal">
                <code>.padding--12_horizontal</code>
            </div>
            <div class="ss-c-demo__box padding--32_horizontal">
                <code>.padding--32_horizontal</code>
            </div>
            <div class="ss-c-demo__box padding--64_horizontal">
                <code>.padding--64_horizontal</code>
            </div>
            
        </div>