Space: Responsive

WIP

HTML
Assets
Info
Notes


        
        <div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-padding-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-padding-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-padding-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-padding-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-padding-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-padding-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-padding-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-padding-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-padding-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-padding-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-padding-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-padding-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-margin-r-top u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-top
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-margin-r-right u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-right
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-margin-r-bottom u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-bottom
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-margin-r-left u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-left
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxs u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxs u-margin-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xs u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xs u-margin-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-s u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-s u-margin-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-m u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-m u-margin-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-l u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-l u-margin-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xl u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xl u-margin-r-all
        </p>
    </div>
</div>

<div class="u-border-all-xxs u-color-grey-80 u-md-size1of3 u-lg-size1of3 u-margin-all-l u-padding-all-xxs">
    <div class="u-text-r-xxl u-margin-r-all u-background-teal-50">
        <p class="u-background-95 u-color-white u-border-all-xxs">
            u-text-r-xxl u-margin-r-all
        </p>
    </div>
</div>

File:

Content:


                                /** @define utilities; */

:root {
  --Spacing-unit-fixed: 0.4rem;
}

/* All */

.u-padding-all-none { padding: 0 !important; }
.u-padding-all-xxs { padding: var(--Spacing-unit-fixed) !important; }
.u-padding-all-xs { padding: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-padding-all-s { padding: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-padding-all-m { padding: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-padding-all-l { padding: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-padding-all-xl { padding: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-padding-all-xxl { padding: calc(10 * var(--Spacing-unit-fixed)) !important; }

.u-margin-all-none { margin: 0 !important; }
.u-margin-all-xxs { margin: var(--Spacing-unit-fixed) !important; }
.u-margin-all-xs { margin: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-margin-all-s { margin: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-margin-all-m { margin: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-margin-all-l { margin: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-margin-all-xl { margin: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-margin-all-xxl { margin: calc(10 * var(--Spacing-unit-fixed)) !important; }

/* Top */

.u-padding-top-none { padding-top: 0 !important; }
.u-padding-top-xxs { padding-top: var(--Spacing-unit-fixed) !important; }
.u-padding-top-xs { padding-top: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-padding-top-s { padding-top: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-padding-top-m { padding-top: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-padding-top-l { padding-top: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-padding-top-xl { padding-top: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-padding-top-xxl { padding-top: calc(10 * var(--Spacing-unit-fixed)) !important; }

.u-margin-top-none { margin-top: 0 !important; }
.u-margin-top-xxs { margin-top: var(--Spacing-unit-fixed) !important; }
.u-margin-top-xs { margin-top: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-margin-top-s { margin-top: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-margin-top-m { margin-top: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-margin-top-l { margin-top: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-margin-top-xl { margin-top: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-margin-top-xxl { margin-top: calc(10 * var(--Spacing-unit-fixed)) !important; }

/* Bottom */

.u-padding-bottom-none { padding-bottom: 0 !important; }
.u-padding-bottom-xxs { padding-bottom: var(--Spacing-unit-fixed) !important; }
.u-padding-bottom-xs { padding-bottom: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-padding-bottom-s { padding-bottom: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-padding-bottom-m { padding-bottom: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-padding-bottom-l { padding-bottom: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-padding-bottom-xl { padding-bottom: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-padding-bottom-xxl { padding-bottom: calc(10 * var(--Spacing-unit-fixed)) !important; }

.u-margin-bottom-none { margin-bottom: 0 !important; }
.u-margin-bottom-xxs { margin-bottom: var(--Spacing-unit-fixed) !important; }
.u-margin-bottom-xs { margin-bottom: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-margin-bottom-s { margin-bottom: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-margin-bottom-m { margin-bottom: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-margin-bottom-l { margin-bottom: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-margin-bottom-xl { margin-bottom: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-margin-bottom-xxl { margin-bottom: calc(10 * var(--Spacing-unit-fixed)) !important; }

/* Left */

.u-padding-left-none { padding-left: 0 !important; }
.u-padding-left-xxs { padding-left: var(--Spacing-unit-fixed) !important; }
.u-padding-left-xs { padding-left: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-padding-left-s { padding-left: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-padding-left-m { padding-left: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-padding-left-l { padding-left: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-padding-left-xl { padding-left: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-padding-left-xxl { padding-left: calc(10 * var(--Spacing-unit-fixed)) !important; }

.u-margin-left-none { margin-left: 0 !important; }
.u-margin-left-xxs { margin-left: var(--Spacing-unit-fixed) !important; }
.u-margin-left-xs { margin-left: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-margin-left-s { margin-left: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-margin-left-m { margin-left: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-margin-left-l { margin-left: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-margin-left-xl { margin-left: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-margin-left-xxl { margin-left: calc(10 * var(--Spacing-unit-fixed)) !important; }

/* Right */

.u-padding-right-none { padding-right: 0 !important; }
.u-padding-right-xxs { padding-right: var(--Spacing-unit-fixed) !important; }
.u-padding-right-xs { padding-right: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-padding-right-s { padding-right: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-padding-right-m { padding-right: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-padding-right-l { padding-right: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-padding-right-xl { padding-right: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-padding-right-xxl { padding-right: calc(10 * var(--Spacing-unit-fixed)) !important; }

.u-margin-right-none { margin-right: 0 !important; }
.u-margin-right-xxs { margin-right: var(--Spacing-unit-fixed) !important; }
.u-margin-right-xs { margin-right: calc(2 * var(--Spacing-unit-fixed)) !important; }
.u-margin-right-s { margin-right: calc(4 * var(--Spacing-unit-fixed)) !important; }
.u-margin-right-m { margin-right: calc(5 * var(--Spacing-unit-fixed)) !important; }
.u-margin-right-l { margin-right: calc(6 * var(--Spacing-unit-fixed)) !important; }
.u-margin-right-xl { margin-right: calc(8 * var(--Spacing-unit-fixed)) !important; }
.u-margin-right-xxl { margin-right: calc(10 * var(--Spacing-unit-fixed)) !important; }

URL: /components/raw/space/fixed.css
Filesystem Path: src/utils/space/fixed.css
Size: 6.4 KB

Content:


                                @import "./fixed.css";
@import "./relative.css";
@import "./responsive.css";

URL: /components/raw/space/index.css
Filesystem Path: src/utils/space/index.css
Size: 77 Bytes

Content:


                                /** @define utilities; */

.u-padding-r-all { padding: 1em !important; }
.u-margin-r-all { margin: 1em !important; }

.u-padding-r-top { padding-top: 1em !important; }
.u-margin-r-top { margin-top: 1em !important; }

.u-padding-r-bottom { padding-bottom: 1em !important; }
.u-margin-r-bottom { margin-bottom: 1em !important; }

.u-padding-r-left { padding-left: 1em !important; }
.u-margin-r-left { margin-left: 1em !important; }

.u-padding-r-right { padding-right: 1em !important; }
.u-margin-r-right { margin-right: 1em !important; }

/* Font size reset for inner elements */

/* postcss-bem-linter: ignore */

.u-padding-r-all > *,
.u-margin-r-all > *,
.u-padding-r-top > *,
.u-margin-r-top > *,
.u-padding-r-bottom > *,
.u-margin-r-bottom > *,
.u-padding-r-left > *,
.u-margin-r-left > *,
.u-padding-r-right > *,
.u-margin-r-right > * {
  font-size: medium;
}

URL: /components/raw/space/relative.css
Filesystem Path: src/utils/space/relative.css
Size: 865 Bytes

Content:


                                @media (--xs-viewport) {

  .u-xs-padding-all-none { padding: 0 !important; }
  .u-xs-padding-top-none { padding-top: 0 !important; }
  .u-xs-padding-bottom-none { padding-bottom: 0 !important; }
  .u-xs-padding-left-none { padding-left: 0 !important; }
  .u-xs-padding-right-none { padding-right: 0 !important; }

  .u-xs-margin-all-none { margin: 0 !important; }
  .u-xs-margin-top-none { margin-top: 0 !important; }
  .u-xs-margin-bottom-none { margin-bottom: 0 !important; }
  .u-xs-margin-left-none { margin-left: 0 !important; }
  .u-xs-margin-right-none { margin-right: 0 !important; }

}

URL: /components/raw/space/responsive.css
Filesystem Path: src/utils/space/responsive.css
Size: 596 Bytes

Handle: @space--responsive
Variants (2): Default , Responsive
Preview:
- With layout
- Component only
Filesystem Path: src/utils/space/space--responsive.tmpl

There are no notes for this item.