Inset

Description

If you want to learn more about the spacing components take a look at this article.

Usage

import SpacingsInset from '@commercetools-uikit/spacings-inset';

<SpacingsInset scale="m">{/* Container with padding 🎉  */}</SpacingsInset>;

Using Spacings preset

Inset spacing can be imported and used via spacings preset as well.

import Spacings from '@commercetools-uikit/spacings';

<Spacings.Inset scale="m">{/* Container with padding 🎉  */}</Spacings.Inset>;

Properties

| Props | Type | Required | Values | Default | | ---------- | ---------------- | :------: | ----------------------------- | ----------- | | scale | String | - | ['xs', 's', 'm', 'l', 'xl'] | x | | height | String | - | collapsed, expanded | collapsed | | children | PropTypes.node | - | - | - |

Scales

| Scale | Pixel | | :---- | :---- | | xs | 4 | | s | 8 | | m | 16 | | l | 24 | | xl | 32 |