Object | Height

Object | Height | Fixed Heights (from map tokens)

 
 
 
 
 
HTML
<div class="ss-c-grid">
            <label>.object--height--xs</label>
            <div class="ss-c-object--height--xs ss-c-object--fill--fill_secondary">
                &nbsp;
            </div>
            <label>.object--height--sm</label>
            <div class="ss-c-object--height--sm ss-c-object--fill--fill_secondary">
                &nbsp;
            </div>
            <label>.object--height--md</label>
            <div class="ss-c-object--height--md ss-c-object--fill--fill_secondary">
                &nbsp;
            </div>
            <label>.object--height--lg</label>
            <div class="ss-c-object--height--lg ss-c-object--fill--fill_secondary">
                &nbsp;
            </div>
            <label>.object--height--xl</label>
            <div class="ss-c-object--height--xl ss-c-object--fill--fill_secondary">
                &nbsp;
            </div>
        </div>

Object | Height | Fixed Heights (from map tokens)

 
 
 
 
 
HTML
<div class="ss-c-grid">
            <label>.object--height--fixed--xs</label>
            <div
                class="ss-c-object--height--fixed--xs ss-c-object--fill--fill_secondary"
            >
                &nbsp;
            </div>
            <label>.object--height--fixed--sm</label>
            <div
                class="ss-c-object--height--fixed--sm ss-c-object--fill--fill_secondary"
            >
                &nbsp;
            </div>
            <label>.object--height--fixed--md</label>
            <div
                class="ss-c-object--height--fixed--md ss-c-object--fill--fill_secondary"
            >
                &nbsp;
            </div>
            <label>.object--height--fixed--lg</label>
            <div
                class="ss-c-object--height--fixed--lg ss-c-object--fill--fill_secondary"
            >
                &nbsp;
            </div>
            <label>.object--height--fixed--xl</label>
            <div
                class="ss-c-object--height--fixed--xl ss-c-object--fill--fill_secondary"
            >
                &nbsp;
            </div>
        </div>

Object | Height | Full--smcreen / Full-Height Utilities

.full-screen (100vh)
.minheight-fullscreen (min-height: 100vh)
.max-h-100 (max-height: 100%)
HTML
<div class="ss-c-card ss-c-full-screen ss-c-bg-gray">.full-screen (100vh)</div>
        <div class="ss-c-card ss-c-minheight-fullscreen ss-c-bg-gray">
            .minheight-fullscreen (min-height: 100vh)
        </div>
        <div class="ss-c-card ss-c-max-h-100 ss-c-bg-gray" style="height: 300px">
            .max-h-100 (max-height: 100%)
        </div>