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">
</div>
<label>.object--height--sm</label>
<div class="ss-c-object--height--sm ss-c-object--fill--fill_secondary">
</div>
<label>.object--height--md</label>
<div class="ss-c-object--height--md ss-c-object--fill--fill_secondary">
</div>
<label>.object--height--lg</label>
<div class="ss-c-object--height--lg ss-c-object--fill--fill_secondary">
</div>
<label>.object--height--xl</label>
<div class="ss-c-object--height--xl ss-c-object--fill--fill_secondary">
</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"
>
</div>
<label>.object--height--fixed--sm</label>
<div
class="ss-c-object--height--fixed--sm ss-c-object--fill--fill_secondary"
>
</div>
<label>.object--height--fixed--md</label>
<div
class="ss-c-object--height--fixed--md ss-c-object--fill--fill_secondary"
>
</div>
<label>.object--height--fixed--lg</label>
<div
class="ss-c-object--height--fixed--lg ss-c-object--fill--fill_secondary"
>
</div>
<label>.object--height--fixed--xl</label>
<div
class="ss-c-object--height--fixed--xl ss-c-object--fill--fill_secondary"
>
</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>