Carbon Design System

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.

Get started
Usage
Resources

Get started

To install @carbon/layout in your project, you will need to run the following command using npm:

npm install -S @carbon/layout
Copy to clipboard

If you prefer Yarn, use the following command instead:

yarn add @carbon/layout
Copy to clipboard

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);
}
Copy to clipboard

API

Export	Description	!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);
Copy to clipboard

Resources

Carbon layout package

Layout package demo

Edit this page on GitHub

Spacing: Overview

Guidelines: Themes