Spacing units

The Clinical Design System follows the USWDS and VADS spacing unit tokens.

The spacing unit tokens are based on multiples of 8px, with additional tokens for small sizes (1x, 2px, 4px, 12px and 20px) and goes up to 560px or 70 units.

Any spacing value in utilities or component CSS should use the following spacing unit tokens, based on multiples of 8px. The documentation below displays a target value in pixels, but the final output for tokens is the equivalent value in rem, where one unit is 1rem divided by 2, which will vary depending on your project settings.

Using the mixin

Import the mixin in your Sass file using the following.

Note - It is recommended to namespace your import using as NAMESPACE to avoid conflicts with other files using the same token.

@use '../../../core/tokens/spacing' as spacing;

Then define desired values using the following

spacing.grid(1)

Sample of returned values

Note - You can use spacing.grid(TOKEN) up to spacing.grid(70)