24 #Spacing Spacing

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-mb-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-mb-zero - 0
.-sf-mb-8xs - 1px
.-sf-mb-7xs - 2px
.-sf-mb-6xs - 3px
.-sf-mb-5xs - 4px
.-sf-mb-4xs - 5px
.-sf-mb-3xs - 10px
.-sf-mb-2xs - 15px
.-sf-mb-xs - 20px
.-sf-mb-s - 25px
.-sf-mb-m - 30px
.-sf-mb-l - 35px
.-sf-mb-xl - 40x
.-sf-mb-2xl - 45px
.-sf-mb-3xl - 50px
.-sf-mb-4xl - 55px
.-sf-mb-5xl - 60px
.-sf-mb-6xl - 80px
.-sf-mb-7xl - 100px
.-sf-mb-8xl - 120px
Html
    <div class="-sf-mb-zero">.-sf-mb-zero - 0</div>
    <div class="-sf-mb-8xs">.-sf-mb-8xs - 1px</div>
    <div class="-sf-mb-7xs">.-sf-mb-7xs - 2px</div>
    <div class="-sf-mb-6xs">.-sf-mb-6xs - 3px</div>
    <div class="-sf-mb-5xs">.-sf-mb-5xs - 4px</div>
    <div class="-sf-mb-4xs">.-sf-mb-4xs - 5px</div>
    <div class="-sf-mb-3xs">.-sf-mb-3xs - 10px</div>
    <div class="-sf-mb-2xs">.-sf-mb-2xs - 15px</div>
    <div class="-sf-mb-xs">.-sf-mb-xs - 20px</div>
    <div class="-sf-mb-s">.-sf-mb-s - 25px</div>
    <div class="-sf-mb-m">.-sf-mb-m - 30px</div>
    <div class="-sf-mb-l">.-sf-mb-l - 35px</div>
    <div class="-sf-mb-xl">.-sf-mb-xl - 40x</div>
    <div class="-sf-mb-2xl">.-sf-mb-2xl - 45px</div>
    <div class="-sf-mb-3xl">.-sf-mb-3xl  - 50px</div>
    <div class="-sf-mb-4xl">.-sf-mb-4xl - 55px</div>
    <div class="-sf-mb-5xl">.-sf-mb-5xl  - 60px</div>
    <div class="-sf-mb-6xl">.-sf-mb-6xl - 80px</div>
    <div class="-sf-mb-7xl">.-sf-mb-7xl  - 100px</div>
    <div class="-sf-mb-8xl">.-sf-mb-8xl  - 120px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-mb--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}

.-sf-mb--6xl - -80px
.-sf-mb--5xl - -60px
.-sf-mb--4xl - -55px
.-sf-mb--3xl - -50px
.-sf-mb--2xl - -45px
.-sf-mb--xl - -40x
.-sf-mb--l - -35px
.-sf-mb--m - -30px
.-sf-mb--s - -25px
.-sf-mb--xs - -20px
.-sf-mb--2xs - -15px
.-sf-mb--3xs - -10px
.-sf-mb--4xs - -5px
Html
    <div class="--sf-mb--6xl">.-sf-mb--6xl - -80px</div>
    <div class="--sf-mb--5xl">.-sf-mb--5xl  - -60px</div>
    <div class="--sf-mb--4xl">.-sf-mb--4xl - -55px</div>
    <div class="--sf-mb--3xl">.-sf-mb--3xl  - -50px</div>
    <div class="--sf-mb--2xl">.-sf-mb--2xl - -45px</div>
    <div class="--sf-mb--xl">.-sf-mb--xl - -40x</div>
    <div class="--sf-mb--l">.-sf-mb--l - -35px</div>
    <div class="--sf-mb--m">.-sf-mb--m - -30px</div>
    <div class="--sf-mb--s">.-sf-mb--s - -25px</div>
    <div class="--sf-mb--xs">.-sf-mb--xs - -20px</div>
    <div class="--sf-mb--2xs">.-sf-mb--2xs - -15px</div>
    <div class="--sf-mb--3xs">.-sf-mb--3xs - -10px</div>
    <div class="--sf-mb--4xs">.-sf-mb--4xs - -5px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-m-{auto,zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-m-auto - auto
.-sf-m-zero - 0
.-sf-m-8xs - 1px
.-sf-m-7xs - 2px
.-sf-m-6xs - 3px
.-sf-m-5xs - 4px
.-sf-m-4xs - 5px
.-sf-m-3xs - 10px
.-sf-m-2xs - 15px
.-sf-m-xs - 20px
.-sf-m-s - 25px
.-sf-m-m - 30px
.-sf-m-l - 35px
.-sf-m-xl - 40x
.-sf-m-2xl - 45px
.-sf-m-3xl - 50px
.-sf-m-4xl - 55px
.-sf-m-5xl - 60px
.-sf-m-6xl - 80px
.-sf-m-7xl - 100px
.-sf-m-8xl - 120px
Html
    <div class="-sf-m-auto">.-sf-m-auto - auto</div>
    <div class="-sf-m-zero">.-sf-m-zero - 0</div>
    <div class="-sf-m-8xs">.-sf-m-8xs - 1px</div>
    <div class="-sf-m-7xs">.-sf-m-7xs - 2px</div>
    <div class="-sf-m-6xs">.-sf-m-6xs - 3px</div>
    <div class="-sf-m-5xs">.-sf-m-5xs - 4px</div>
    <div class="-sf-m-4xs">.-sf-m-4xs - 5px</div>
    <div class="-sf-m-3xs">.-sf-m-3xs - 10px</div>
    <div class="-sf-m-2xs">.-sf-m-2xs - 15px</div>
    <div class="-sf-m-xs">.-sf-m-xs - 20px</div>
    <div class="-sf-m-s">.-sf-m-s - 25px</div>
    <div class="-sf-m-m">.-sf-m-m - 30px</div>
    <div class="-sf-m-l">.-sf-m-l - 35px</div>
    <div class="-sf-m-xl">.-sf-m-xl - 40x</div>
    <div class="-sf-m-2xl">.-sf-m-2xl - 45px</div>
    <div class="-sf-m-3xl">.-sf-m-3xl  - 50px</div>
    <div class="-sf-m-4xl">.-sf-m-4xl - 55px</div>
    <div class="-sf-m-5xl">.-sf-m-5xl  - 60px</div>
    <div class="-sf-m-6xl">.-sf-m-6xl - 80px</div>
    <div class="-sf-m-7xl">.-sf-m-7xl  - 100px</div>
    <div class="-sf-m-8xl">.-sf-m-8xl  - 120px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-ml-{auto,zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-ml-auto - auto
.-sf-ml-zero - 0
.-sf-ml-8xs - 1px
.-sf-ml-7xs - 2px
.-sf-ml-6xs - 3px
.-sf-ml-5xs - 4px
.-sf-ml-4xs - 5px
.-sf-ml-3xs - 10px
.-sf-ml-2xs - 15px
.-sf-ml-xs - 20px
.-sf-ml-s - 25px
.-sf-ml-m - 30px
.-sf-ml-l - 35px
.-sf-ml-xl - 40x
.-sf-ml-2xl - 45px
.-sf-ml-3xl - 50px
.-sf-ml-4xl - 55px
.-sf-ml-5xl - 60px
.-sf-ml-6xl - 80px
.-sf-ml-7xl - 100px
.-sf-ml-8xl - 120px
Html
    <div class="-sf-ml-auto">.-sf-ml-auto - auto</div>
    <div class="-sf-ml-zero">.-sf-ml-zero - 0</div>
    <div class="-sf-ml-8xs">.-sf-ml-8xs - 1px</div>
    <div class="-sf-ml-7xs">.-sf-ml-7xs - 2px</div>
    <div class="-sf-ml-6xs">.-sf-ml-6xs - 3px</div>
    <div class="-sf-ml-5xs">.-sf-ml-5xs - 4px</div>
    <div class="-sf-ml-4xs">.-sf-ml-4xs - 5px</div>
    <div class="-sf-ml-3xs">.-sf-ml-3xs - 10px</div>
    <div class="-sf-ml-2xs">.-sf-ml-2xs - 15px</div>
    <div class="-sf-ml-xs">.-sf-ml-xs - 20px</div>
    <div class="-sf-ml-s">.-sf-ml-s - 25px</div>
    <div class="-sf-ml-m">.-sf-ml-m - 30px</div>
    <div class="-sf-ml-l">.-sf-ml-l - 35px</div>
    <div class="-sf-ml-xl">.-sf-ml-xl - 40x</div>
    <div class="-sf-ml-2xl">.-sf-ml-2xl - 45px</div>
    <div class="-sf-ml-3xl">.-sf-ml-3xl  - 50px</div>
    <div class="-sf-ml-4xl">.-sf-ml-4xl - 55px</div>
    <div class="-sf-ml-5xl">.-sf-ml-5xl  - 60px</div>
    <div class="-sf-ml-6xl">.-sf-ml-6xl - 80px</div>
    <div class="-sf-ml-7xl">.-sf-ml-7xl  - 100px</div>
    <div class="-sf-ml-8xl">.-sf-ml-8xl  - 120px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-ml--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}

.-sf-ml--6xl - -80px
.-sf-ml--5xl - -60px
.-sf-ml--4xl - -55px
.-sf-ml--3xl - -50px
.-sf-ml--2xl - -45px
.-sf-ml--xl - -40x
.-sf-ml--l - -35px
.-sf-ml--m - -30px
.-sf-ml--s - -25px
.-sf-ml--xs - -20px
.-sf-ml--2xs - -15px
.-sf-ml--3xs - -10px
.-sf-ml--4xs - -5px
Html
    <div class="--sf-ml--6xl">.-sf-ml--6xl - -80px</div>
    <div class="--sf-ml--5xl">.-sf-ml--5xl  - -60px</div>
    <div class="--sf-ml--4xl">.-sf-ml--4xl - -55px</div>
    <div class="--sf-ml--3xl">.-sf-ml--3xl  - -50px</div>
    <div class="--sf-ml--2xl">.-sf-ml--2xl - -45px</div>
    <div class="--sf-ml--xl">.-sf-ml--xl - -40x</div>
    <div class="--sf-ml--l">.-sf-ml--l - -35px</div>
    <div class="--sf-ml--m">.-sf-ml--m - -30px</div>
    <div class="--sf-ml--s">.-sf-ml--s - -25px</div>
    <div class="--sf-ml--xs">.-sf-ml--xs - -20px</div>
    <div class="--sf-ml--2xs">.-sf-ml--2xs - -15px</div>
    <div class="--sf-ml--3xs">.-sf-ml--3xs - -10px</div>
    <div class="--sf-ml--4xs">.-sf-ml--4xs - -5px</div>

Margin left and right specials

-sf-ml-auto, -sf-mr-auto, -sf-ml-50, -sf-mr-50

@example
<div class="-sf-ml-auto">.-sf-ml-auto - auto</div>
<div class="-sf-mr-auto">.-sf-mr-auto - auto</div>
<div class="-sf-ml-50">.-sf-ml-50 - 50%</div>
<div class="-sf-mr-50">.-sf-mr-50 - 50%</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-mr-{auto,zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-mr-auto - auto
.-sf-mr-zero - 0
.-sf-mr-8xs - 1px
.-sf-mr-7xs - 2px
.-sf-mr-6xs - 3px
.-sf-mr-5xs - 4px
.-sf-mr-4xs - 5px
.-sf-mr-3xs - 10px
.-sf-mr-2xs - 15px
.-sf-mr-xs - 20px
.-sf-mr-s - 25px
.-sf-mr-m - 30px
.-sf-mr-l - 35px
.-sf-mr-xl - 40x
.-sf-mr-2xl - 45px
.-sf-mr-3xl - 50px
.-sf-mr-4xl - 55px
.-sf-mr-5xl - 60px
.-sf-mr-6xl - 80px
.-sf-mr-7xl - 100px
.-sf-mr-8xl - 120px
Html
    <div class="-sf-mr-auto">.-sf-mr-auto - auto</div>
    <div class="-sf-mr-zero">.-sf-mr-zero - 0</div>
    <div class="-sf-mr-8xs">.-sf-mr-8xs - 1px</div>
    <div class="-sf-mr-7xs">.-sf-mr-7xs - 2px</div>
    <div class="-sf-mr-6xs">.-sf-mr-6xs - 3px</div>
    <div class="-sf-mr-5xs">.-sf-mr-5xs - 4px</div>
    <div class="-sf-mr-4xs">.-sf-mr-4xs - 5px</div>
    <div class="-sf-mr-3xs">.-sf-mr-3xs - 10px</div>
    <div class="-sf-mr-2xs">.-sf-mr-2xs - 15px</div>
    <div class="-sf-mr-xs">.-sf-mr-xs - 20px</div>
    <div class="-sf-mr-s">.-sf-mr-s - 25px</div>
    <div class="-sf-mr-m">.-sf-mr-m - 30px</div>
    <div class="-sf-mr-l">.-sf-mr-l - 35px</div>
    <div class="-sf-mr-xl">.-sf-mr-xl - 40x</div>
    <div class="-sf-mr-2xl">.-sf-mr-2xl - 45px</div>
    <div class="-sf-mr-3xl">.-sf-mr-3xl  - 50px</div>
    <div class="-sf-mr-4xl">.-sf-mr-4xl - 55px</div>
    <div class="-sf-mr-5xl">.-sf-mr-5xl  - 60px</div>
    <div class="-sf-mr-6xl">.-sf-mr-6xl - 80px</div>
    <div class="-sf-mr-7xl">.-sf-mr-7xl  - 100px</div>
    <div class="-sf-mr-8xl">.-sf-mr-8xl  - 120px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-mr--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}

.-sf-mr--6xl - -80px
.-sf-mr--5xl - -60px
.-sf-mr--4xl - -55px
.-sf-mr--3xl - -50px
.-sf-mr--2xl - -45px
.-sf-mr--xl - -40x
.-sf-mr--l - -35px
.-sf-mr--m - -30px
.-sf-mr--s - -25px
.-sf-mr--xs - -20px
.-sf-mr--2xs - -15px
.-sf-mr--3xs - -10px
.-sf-mr--4xs - -5px
Html
    <div class="--sf-mr--6xl">.-sf-mr--6xl - -80px</div>
    <div class="--sf-mr--5xl">.-sf-mr--5xl  - -60px</div>
    <div class="--sf-mr--4xl">.-sf-mr--4xl - -55px</div>
    <div class="--sf-mr--3xl">.-sf-mr--3xl  - -50px</div>
    <div class="--sf-mr--2xl">.-sf-mr--2xl - -45px</div>
    <div class="--sf-mr--xl">.-sf-mr--xl - -40x</div>
    <div class="--sf-mr--l">.-sf-mr--l - -35px</div>
    <div class="--sf-mr--m">.-sf-mr--m - -30px</div>
    <div class="--sf-mr--s">.-sf-mr--s - -25px</div>
    <div class="--sf-mr--xs">.-sf-mr--xs - -20px</div>
    <div class="--sf-mr--2xs">.-sf-mr--2xs - -15px</div>
    <div class="--sf-mr--3xs">.-sf-mr--3xs - -10px</div>
    <div class="--sf-mr--4xs">.-sf-mr--4xs - -5px</div>

-sf-mt-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

@example
<div class="-sf-mt-zero">.-sf-mt-zero - 0</div>
<div class="-sf-mt-8xs">.-sf-mt-8xs - 1px</div>
<div class="-sf-mt-7xs">.-sf-mt-7xs - 2px</div>
<div class="-sf-mt-6xs">.-sf-mt-6xs - 3px</div>
<div class="-sf-mt-5xs">.-sf-mt-5xs - 4px</div>
<div class="-sf-mt-4xs">.-sf-mt-4xs - 5px</div>
<div class="-sf-mt-3xs">.-sf-mt-3xs - 10px</div>
<div class="-sf-mt-2xs">.-sf-mt-2xs - 15px</div>
<div class="-sf-mt-xs">.-sf-mt-xs - 20px</div>
<div class="-sf-mt-s">.-sf-mt-s - 25px</div>
<div class="-sf-mt-m">.-sf-mt-m - 30px</div>
<div class="-sf-mt-l">.-sf-mt-l - 35px</div>
<div class="-sf-mt-xl">.-sf-mt-xl - 40x</div>
<div class="-sf-mt-2xl">.-sf-mt-2xl - 45px</div>
<div class="-sf-mt-3xl">.-sf-mt-3xl  - 50px</div>
<div class="-sf-mt-4xl">.-sf-mt-4xl - 55px</div>
<div class="-sf-mt-5xl">.-sf-mt-5xl  - 60px</div>
<div class="-sf-mt-6xl">.-sf-mt-6xl - 80px</div>
<div class="-sf-mt-7xl">.-sf-mt-7xl  - 100px</div>
<div class="-sf-mt-8xl">.-sf-mt-8xl  - 120px</div>
<div class="-sf-mt-9xl">.-sf-mt-9xl  - 140px</div>
<div class="-sf-mt-10xl">.-sf-mt-10xl  - 160px</div>
<div class="-sf-mt-11xl">.-sf-mt-11xl  - 180px</div>
<div class="-sf-mt-12xl">.-sf-mt-12xl  - 200px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-mt--{6xl, 5xl, 4xl, 3xl, 2xl, xl, l, m, s, xs, 2xs, 3xs, 4xs}

.-sf-mt--6xl - -80px
.-sf-mt--5xl - -60px
.-sf-mt--4xl - -55px
.-sf-mt--3xl - -50px
.-sf-mt--2xl - -45px
.-sf-mt--xl - -40x
.-sf-mt--l - -35px
.-sf-mt--m - -30px
.-sf-mt--s - -25px
.-sf-mt--xs - -20px
.-sf-mt--2xs - -15px
.-sf-mt--3xs - -10px
.-sf-mt--4xs - -5px
Html
    <div class="--sf-mt--6xl">.-sf-mt--6xl - -80px</div>
    <div class="--sf-mt--5xl">.-sf-mt--5xl  - -60px</div>
    <div class="--sf-mt--4xl">.-sf-mt--4xl - -55px</div>
    <div class="--sf-mt--3xl">.-sf-mt--3xl  - -50px</div>
    <div class="--sf-mt--2xl">.-sf-mt--2xl - -45px</div>
    <div class="--sf-mt--xl">.-sf-mt--xl - -40x</div>
    <div class="--sf-mt--l">.-sf-mt--l - -35px</div>
    <div class="--sf-mt--m">.-sf-mt--m - -30px</div>
    <div class="--sf-mt--s">.-sf-mt--s - -25px</div>
    <div class="--sf-mt--xs">.-sf-mt--xs - -20px</div>
    <div class="--sf-mt--2xs">.-sf-mt--2xs - -15px</div>
    <div class="--sf-mt--3xs">.-sf-mt--3xs - -10px</div>
    <div class="--sf-mt--4xs">.-sf-mt--4xs - -5px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-pb-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-pb-zero - 0
.-sf-pb-8xs - 1px
.-sf-pb-7xs - 2px
.-sf-pb-6xs - 3px
.-sf-pb-5xs - 4px
.-sf-pb-4xs - 5px
.-sf-pb-3xs - 10px
.-sf-pb-2xs - 15px
.-sf-pb-xs - 20px
.-sf-pb-s - 25px
.-sf-pb-m - 30px
.-sf-pb-l - 35px
.-sf-pb-xl - 40x
.-sf-pb-2xl - 45px
.-sf-pb-3xl - 50px
.-sf-pb-4xl - 55px
.-sf-pb-5xl - 60px
.-sf-pb-6xl - 80px
.-sf-pb-7xl - 100px
.-sf-pb-8xl - 120px
Html
    <div class="-sf-pb-zero">.-sf-pb-zero - 0</div>
    <div class="-sf-m-8xs">.-sf-pb-8xs - 1px</div>
    <div class="-sf-m-7xs">.-sf-pb-7xs - 2px</div>
    <div class="-sf-m-6xs">.-sf-pb-6xs - 3px</div>
    <div class="-sf-m-5xs">.-sf-pb-5xs - 4px</div>
    <div class="-sf-pb-4xs">.-sf-pb-4xs - 5px</div>
    <div class="-sf-pb-3xs">.-sf-pb-3xs - 10px</div>
    <div class="-sf-pb-2xs">.-sf-pb-2xs - 15px</div>
    <div class="-sf-pb-xs">.-sf-pb-xs - 20px</div>
    <div class="-sf-pb-s">.-sf-pb-s - 25px</div>
    <div class="-sf-pb-m">.-sf-pb-m - 30px</div>
    <div class="-sf-pb-l">.-sf-pb-l - 35px</div>
    <div class="-sf-pb-xl">.-sf-pb-xl - 40x</div>
    <div class="-sf-pb-2xl">.-sf-pb-2xl - 45px</div>
    <div class="-sf-pb-3xl">.-sf-pb-3xl  - 50px</div>
    <div class="-sf-pb-4xl">.-sf-pb-4xl - 55px</div>
    <div class="-sf-pb-5xl">.-sf-pb-5xl  - 60px</div>
    <div class="-sf-pb-6xl">.-sf-pb-6xl - 80px</div>
    <div class="-sf-pb-7xl">.-sf-pb-7xl  - 100px</div>
    <div class="-sf-pb-8xl">.-sf-pb-8xl  - 120px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-pl-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-pl-zero - 0
.-sf-pl-8xs - 1px
.-sf-pl-7xs - 2px
.-sf-pl-6xs - 3px
.-sf-pl-5xs - 4px
.-sf-pl-4xs - 5px
.-sf-pl-3xs - 10px
.-sf-pl-2xs - 15px
.-sf-pl-xs - 20px
.-sf-pl-s - 25px
.-sf-pl-m - 30px
.-sf-pl-l - 35px
.-sf-pl-xl - 40x
.-sf-pl-2xl - 45px
.-sf-pl-3xl - 50px
.-sf-pl-4xl - 55px
.-sf-pl-5xl - 60px
.-sf-pl-6xl - 80px
.-sf-pl-7xl - 100px
.-sf-pl-8xl - 120px
Html
    <div class="-sf-pl-zero">.-sf-pl-zero - 0</div>
    <div class="-sf-m-8xs">.-sf-pl-8xs - 1px</div>
    <div class="-sf-m-7xs">.-sf-pl-7xs - 2px</div>
    <div class="-sf-m-6xs">.-sf-pl-6xs - 3px</div>
    <div class="-sf-m-5xs">.-sf-pl-5xs - 4px</div>
    <div class="-sf-pl-4xs">.-sf-pl-4xs - 5px</div>
    <div class="-sf-pl-3xs">.-sf-pl-3xs - 10px</div>
    <div class="-sf-pl-2xs">.-sf-pl-2xs - 15px</div>
    <div class="-sf-pl-xs">.-sf-pl-xs - 20px</div>
    <div class="-sf-pl-s">.-sf-pl-s - 25px</div>
    <div class="-sf-pl-m">.-sf-pl-m - 30px</div>
    <div class="-sf-pl-l">.-sf-pl-l - 35px</div>
    <div class="-sf-pl-xl">.-sf-pl-xl - 40x</div>
    <div class="-sf-pl-2xl">.-sf-pl-2xl - 45px</div>
    <div class="-sf-pl-3xl">.-sf-pl-3xl  - 50px</div>
    <div class="-sf-pl-4xl">.-sf-pl-4xl - 55px</div>
    <div class="-sf-pl-5xl">.-sf-pl-5xl  - 60px</div>
    <div class="-sf-pl-6xl">.-sf-pl-6xl - 80px</div>
    <div class="-sf-pl-7xl">.-sf-pl-7xl  - 100px</div>
    <div class="-sf-pl-8xl">.-sf-pl-8xl  - 120px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-pr-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-pr-zero - 0
.-sf-pr-8xs - 1px
.-sf-pr-7xs - 2px
.-sf-pr-6xs - 3px
.-sf-pr-5xs - 4px
.-sf-pr-4xs - 5px
.-sf-pr-3xs - 10px
.-sf-pr-2xs - 15px
.-sf-pr-xs - 20px
.-sf-pr-s - 25px
.-sf-pr-m - 30px
.-sf-pr-l - 35px
.-sf-pr-xl - 40x
.-sf-pr-2xl - 45px
.-sf-pr-3xl - 50px
.-sf-pr-4xl - 55px
.-sf-pr-5xl - 60px
.-sf-pr-6xl - 80px
.-sf-pr-7xl - 100px
.-sf-pr-8xl - 120px
Html
    <div class="-sf-pr-zero">.-sf-pr-zero - 0</div>
    <div class="-sf-m-8xs">.-sf-pr-8xs - 1px</div>
    <div class="-sf-m-7xs">.-sf-pr-7xs - 2px</div>
    <div class="-sf-m-6xs">.-sf-pr-6xs - 3px</div>
    <div class="-sf-m-5xs">.-sf-pr-5xs - 4px</div>
    <div class="-sf-pr-4xs">.-sf-pr-4xs - 5px</div>
    <div class="-sf-pr-3xs">.-sf-pr-3xs - 10px</div>
    <div class="-sf-pr-2xs">.-sf-pr-2xs - 15px</div>
    <div class="-sf-pr-xs">.-sf-pr-xs - 20px</div>
    <div class="-sf-pr-s">.-sf-pr-s - 25px</div>
    <div class="-sf-pr-m">.-sf-pr-m - 30px</div>
    <div class="-sf-pr-l">.-sf-pr-l - 35px</div>
    <div class="-sf-pr-xl">.-sf-pr-xl - 40x</div>
    <div class="-sf-pr-2xl">.-sf-pr-2xl - 45px</div>
    <div class="-sf-pr-3xl">.-sf-pr-3xl  - 50px</div>
    <div class="-sf-pr-4xl">.-sf-pr-4xl - 55px</div>
    <div class="-sf-pr-5xl">.-sf-pr-5xl  - 60px</div>
    <div class="-sf-pr-6xl">.-sf-pr-6xl - 80px</div>
    <div class="-sf-pr-7xl">.-sf-pr-7xl  - 100px</div>
    <div class="-sf-pr-8xl">.-sf-pr-8xl  - 120px</div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

-sf-pt-{zero,8xs,7xs,6xs,5xs,4xs,3xs,2xs,xs,s,m,l,xl,2xl,3xl,4xl,5xl,6xl,7xl,8xl, 9xl}

.-sf-pt-zero - 0
.-sf-pt-8xs - 1px
.-sf-pt-7xs - 2px
.-sf-pt-6xs - 3px
.-sf-pt-5xs - 4px
.-sf-pt-4xs - 5px
.-sf-pt-3xs - 10px
.-sf-pt-2xs - 15px
.-sf-pt-xs - 20px
.-sf-pt-s - 25px
.-sf-pt-m - 30px
.-sf-pt-l - 35px
.-sf-pt-xl - 40x
.-sf-pt-2xl - 45px
.-sf-pt-3xl - 50px
.-sf-pt-4xl - 55px
.-sf-pt-5xl - 60px
.-sf-pt-6xl - 80px
.-sf-pt-7xl - 100px
.-sf-pt-8xl - 120px
Html
    <div class="-sf-pt-zero">.-sf-pt-zero - 0</div>
    <div class="-sf-m-8xs">.-sf-pt-8xs - 1px</div>
    <div class="-sf-m-7xs">.-sf-pt-7xs - 2px</div>
    <div class="-sf-m-6xs">.-sf-pt-6xs - 3px</div>
    <div class="-sf-m-5xs">.-sf-pt-5xs - 4px</div>
    <div class="-sf-pt-4xs">.-sf-pt-4xs - 5px</div>
    <div class="-sf-pt-3xs">.-sf-pt-3xs - 10px</div>
    <div class="-sf-pt-2xs">.-sf-pt-2xs - 15px</div>
    <div class="-sf-pt-xs">.-sf-pt-xs - 20px</div>
    <div class="-sf-pt-s">.-sf-pt-s - 25px</div>
    <div class="-sf-pt-m">.-sf-pt-m - 30px</div>
    <div class="-sf-pt-l">.-sf-pt-l - 35px</div>
    <div class="-sf-pt-xl">.-sf-pt-xl - 40x</div>
    <div class="-sf-pt-2xl">.-sf-pt-2xl - 45px</div>
    <div class="-sf-pt-3xl">.-sf-pt-3xl  - 50px</div>
    <div class="-sf-pt-4xl">.-sf-pt-4xl - 55px</div>
    <div class="-sf-pt-5xl">.-sf-pt-5xl  - 60px</div>
    <div class="-sf-pt-6xl">.-sf-pt-6xl - 80px</div>
    <div class="-sf-pt-7xl">.-sf-pt-7xl  - 100px</div>
    <div class="-sf-pt-8xl">.-sf-pt-8xl  - 120px</div>