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 |