В компонентах
Система отступов основана на значении 1rem=16px.
Используйте эти отступы при проектировании отдельных компонентов. Отступы так же включают меньшие значения, необходимые для построения соответствующих визуальных пространственных связей между элементами компонентов и самими компонентами. Небольшое пространство между элементами подразумевает ассоциацию или тесную связь. Наоборот, большое количество места подразумевает разделение.
Фиксированные отступы
Шаги в масштабе, используемом для интервала между внутренним и внешним компонентами.
| Token name | Size (rem/px) | Mini unit | Example |
|---|---|---|---|
$cds-spacing-3xs | 0.125 / 2 | 0.25 | |
$cds-spacing-xxs | 0.25 / 4 | 0.5 | |
$cds-spacing-xs | 0.5 / 8 | 1 | |
$cds-spacing-s | 0.75 / 12 | 1.5 | |
$cds-spacing-m | 1 / 16 | 2 | |
$cds-spacing-l | 1.5 / 24 | 3 | |
$cds-spacing-xl | 2 / 32 | 4 | |
$cds-spacing-xxl | 2.5 / 40 | 5 | |
$cds-spacing-3xl | 3 / 48 | 6 | |
$cds-spacing-4xl | 4 / 64 | 8 | |
$cds-spacing-5xl | 5 / 80 | 10 | |
$cds-spacing-6xl | 6 / 96 | 12 |
Резиновые отступы
Шаги в масштабе, используемом для интервала между внутренним и внешним компонентами.
| Token name | Size (vw) | Example |
|---|---|---|
$cds-fluid-spacing-s | 0 | |
$cds-fluid-spacing-m | 2 | |
$cds-fluid-spacing-l | 5 | |
$cds-fluid-spacing-xl | 10 |
В макете
Отступы макета (layout) используются для размещения компонентов и других элементов пользовательского интерфейса в макете страницы. Здесь используются большᴎ́е значения, чтобы управлять плотностью размещения объектов:
- Используйте меньшие значения отступов макета для создания более плотных композиций и прямых связей.
- Используйте бóльшие значения, чтобы увеличить количество пустого пространства и разделить объекты.
| Token name | Size (rem/px) | Mini unit | Example |
|---|---|---|---|
$cds-layout-xs | 1 / 16 | 2 | |
$cds-layout-s | 1.5 / 24 | 3 | |
$cds-layout-m | 2 / 32 | 4 | |
$cds-layout-l | 3 / 48 | 6 | |
$cds-layout-xl | 4 / 64 | 8 | |
$cds-layout-xxl | 6 / 96 | 12 | |
$cds-layout-3xl | 10 / 160 | 20 |