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 |
children | PropTypes.node | - | - | - |
Scales
Scale | Pixel |
---|
xs | 4 |
s | 8 |
m | 16 |
l | 24 |
xl | 32 |