Stack

Description

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

Usage

import SpacingsStack from '@commercetools-uikit/spacings-stack';

<SpacingsStack scale="m">
  <Card />
  <Card />
  <Card />
</SpacingsStack>;

Using Spacings preset

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

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

<Spacings.Stack scale="m">
  <Card />
  <Card />
  <Card />
</Spacings.Stack>;

Properties

| Props | Type | Required | Values | Default | | ------------ | ---------------- | :------: | ------------------------------------------------- | --------- | | scale | String | - | ['xs', 's', 'm', 'l', 'xl'] | s | | alignItems | oneOf | - | ['stretch', 'flex-start', 'flex-end', 'center'] | stretch | | children | PropTypes.node | - | - | - |

Scales

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