Sizing and Spacing

Open in ChatGPT

Spacing and sizing tokens are used to provide consistent spacing and sizing in your app. All sizing and spacing properties are defined in rem.

REM Unit

rem is a relative length unit. it's relative to the font size of the root element.

Sizing

Use these properties to adjust the sizing of the component (width, height). m is the standard size for almost all components.

Choosing a size

When choosing a size, always make sure to keep it large enough for tap targets.

Example

.element {
  width: var(--dwc-size-m);
  height: var(--dwc-size-m);
}

Variables

Variable	Default Value	Example
--dwc-size-3xs	1.125rem
--dwc-size-2xs	1.375rem
--dwc-size-xs	1.625rem
--dwc-size-s	1.875rem
--dwc-size-m	2.25rem
--dwc-size-l	2.75rem
--dwc-size-xl	3.5rem
--dwc-size-2xl	4rem
--dwc-size-3xl	4.25rem
--dwc-size	var(--dwc-size-m)

Spacing

Use these properties to adjust the inter-component spacing (margin, padding).

Example

.element {
  padding: var(--dwc-space-m);
}

Variables

Variable	Default Value	Example
--dwc-space-3xs	0.075rem
--dwc-space-2xs	0.15rem
--dwc-space-xs	0.25rem
--dwc-space-s	0.5rem
--dwc-space-m	1rem
--dwc-space-l	1.25rem
--dwc-space-xl	1.5rem
--dwc-space-2xl	1.75rem
--dwc-space-3xl	2rem
--dwc-space	var(--dwc-space-s)