Skip to main contentCarbon Design System

Spacing

The Carbon layout package helps teams build consistent experiences through spacing and alignment.

If you’re using @carbon/react, you probably don’t need need to install the layout package separately. See our Carbon React guide to start building.

Usage

The @carbon/layout package provides spacing tokens and conversion utilities for the Carbon Design System. You can access these tokens and helpers by writing the following:

@use '@carbon/layout';
.selector {
margin-bottom: layout.$spacing-05;
width: layout.rem(24px);
height: layout.rem(24px);
}

API


ExportDescription!default
$spacing-01âś…
$spacing-02âś…
$spacing-03âś…
$spacing-04âś…
$spacing-05âś…
$spacing-06âś…
$spacing-07âś…
$spacing-08âś…
$spacing-09âś…
$spacing-10âś…
$spacing-11âś…
$spacing-12âś…
$spacing-13âś…
$spacing
$fluid-spacing-01âś…
$fluid-spacing-02âś…
$fluid-spacing-03âś…
$fluid-spacing-04âś…
$fluid-spacing
@function em
@function rem
$base-font-sizeâś…

Configuration

You can configure parts of the @carbon/layout package that are !default with Sass Modules. For example, you can change the $base-font-size by writing the following:

@use '@carbon/layout' with (
$base-font-size: 18px
);

Resources