Fixed sizes
←Here are a few “fixed” size helper classes, width, height and both directions. Standard spacing sizes are in use.
Available sizes: s, m, l, xl. The sizes are REM based. So they will get a bit smaller on tablet and phone breakpoints. Those classes are also available as min-sizes, like min-size_{size}. Also have a look at the read widths.
Syntax:
size_{size}
SCSS:
_fixed-sizes.scss
Width and height
Height
Width
<div class="flex gap_m">
<div class="span-auto">
<h4 class="ma-b_xs">Width and height</h4>
<div class="flex gap_xs">
<div class="span-auto">
<div data-tooltip="size_xl" class="size_xl pos-rel bo_px bg-b"></div>
</div>
<div class="span-auto">
<div data-tooltip="size_l" class="size_l pos-rel bo_px bg-c"></div>
</div>
<div class="span-auto">
<div data-tooltip="size_m" class="size_m pos-rel bo_px bg-d"></div>
</div>
<div class="span-auto">
<div data-tooltip="size_s" class="size_s pos-rel bo_px bg-e"></div>
</div>
</div>
</div>
<div class="span-auto">
<h4 class="ma-b_xs">Height</h4>
<div class="flex gap_xs">
<div class="span-auto">
<div data-tooltip="height_xl" class="height_xl width_m pos-rel bo_px bg-b"></div>
</div>
<div class="span-auto">
<div data-tooltip="height_l" class="height_l width_m pos-rel bo_px bg-c"></div>
</div>
<div class="span-auto">
<div data-tooltip="height_m" class="height_m width_m pos-rel bo_px bg-d"></div>
</div>
<div class="span-auto">
<div data-tooltip="height_s" class="height_s width_m pos-rel bo_px bg-e"></div>
</div>
</div>
</div>
<div class="span-auto">
<h4 class="ma-b_xs">Width</h4>
<div class="flex gap_xs">
<div class="span-full">
<div data-tooltip="width_xl" class="width_xl height_m pos-rel bo_px bg-b"></div>
</div>
<div class="span-full">
<div data-tooltip="width_l" class="width_l height_m pos-rel bo_px bg-c"></div>
</div>
<div class="span-full">
<div data-tooltip="width_m" class="width_m height_m pos-rel bo_px bg-d"></div>
</div>
<div class="span-full">
<div data-tooltip="width_s" class="width_s height_m pos-rel bo_px bg-e"></div>
</div>
</div>
</div>
</div>