Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
Inside a layout region you can place elements using the spacing system to define distances between them. The spacing scale uses 4px for base unit.
Margin is used to define the space outside of an element.
| Example | Description | Token |
|---|---|---|
4px - 0.25rem | Spacing XSSThis space is used between elements like icons and texts. | map-get($spacing, xxs) |
12px - 0.75rem | Spacing SMThis space is used between elements like buttons. | map-get($spacing, sm) |
24px - 1.5rem | Spacing LGThis space is used to separate groups or sections. | map-get($spacing, lg) |
32px - 2rem | Spacing XLThis space is used to elements from its content like titles, buttons or results. | map-get($spacing, xl) |
Padding is used to define the space inside of an element.
| Example | Description | Token |
|---|---|---|
4px - 0.25rem | Spacing XSSThis space is used for small elements like tooltip. | map-get($spacing, xxs) |
8px - 0.5rem | Spacing XSThis space is used for form elements. | map-get($spacing, xs) |
12px - 0.75rem | Spacing SMThis space is used for medium elements like cards. | map-get($spacing, sm) |
16px - 1rem | Spacing MDThis space is used for big elements like buttons, containers. | map-get($spacing, md) |
24px - 1.5rem | Spacing LGThis space is used for extra big containers. | map-get($spacing, lg) |