Utilities

Utilities дают предсказуемую систему отступов, размеров, раскладки и текстовых правок без создания новых компонентов. Spacing scale используется и в SCSS-переменных, и в utility-классах.

Spacing scale

Spacing tokens
Token	Value	Alias	Utility examples
`$space-0`	0	-	`m-0` `p-0` `g-0`
`$space-1`	5px	`$space-xs`	`mt-1` `px-1`
`$space-2`	8px	`$space-sm`	`mb-2` `g-2`
`$space-3`	12px	-	`p-3` `gy-3`
`$space-4`	15px	`$space-md`	`mx-4` `gx-4`
`$space-5`	18px	-	`pt-5` `pb-5`
`$space-6`	22px	`$space-lg`	`my-6` `g-6`
`$space-8`	34px	`$space-xl`	`mt-8` `p-8`
`$space-10`	48px	`$space-xxl`	`mb-10` `py-10`
`$space-12`	80px	-	`mt-12` `pb-12`

Utility groups

Margin: m-* mt-* mr-* mb-* ml-* mx-* my-*
Padding: p-* pt-* pr-* pb-* pl-* px-* py-*
Gap: g-* gx-* gy-*
Layout: row column f-grid grid grid-2 grid-3
Alignment: items-center justify-between justify-end
Text: fs-sm text-center text-uppercase text-nowrap

Spacing preview

g-4

p-5

px-6 py-3

Utilities HTML

<div class="grid-2 g-4 items-center">
  <div class="p-5">Panel</div>
  <div class="px-6 py-3 text-right">Actions</div>
</div>