Inset Squish
Description
If you want to learn more about the spacing components take a look at
this
article.
Usage
import SpacingsInsetSquish from '@commercetools-uikit/spacings-inset-squish';
<div className={styles.background}>
<SpacingsInsetSquish scale="m">
<Text.Detail>{/* SUBMIT */}</Text.Detail>
</SpacingsInsetSquish>
</div>;
Using Spacings preset
InsetSquish spacing can be imported and used via spacings
preset as well.
import Spacings from '@commercetools-uikit/spacings';
<div className={styles.background}>
<Spacings.InsetSquish scale="m">
<Text.Detail>{/* SUBMIT */}</Text.Detail>
</Spacings.InsetSquish>
</div>;
Properties
Props | Type | Required | Values | Default |
---|
scale | String | - | ['s', 'm', 'l'] | m |
children | PropTypes.node | - | - | - |
Scales
Scale | Pixel |
---|
s | 4 x 8 |
m | 8 x 16 |
l | 16 x 32 |