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.
Space may be invisible, but the concept is critical to good interface design by establishing relationships and influencing visual style.
Root's spacing system consists of 9 spacing variables.
| Size | Variable | Value |
|---|---|---|
| 100 | --ab-spacing-100 | 4px |
| 200 | --ab-spacing-200 | 8px |
| 300 | --ab-spacing-300 | 16px |
| 400 | --ab-spacing-400 | 24px |
| 500 | --ab-spacing-500 | 32px |
| 600 | --ab-spacing-600 | 40px |
| 700 | --ab-spacing-700 | 48px |
| 800 | --ab-spacing-800 | 56px |
| 900 | --ab-spacing-900 | 64px |
The spacing variables can be applied to margin or padding properties like this:
To add spacing around something you can use the ab-container utility component.
It allows you to apply both padding and margin by using certain modifiers.
Individual components in Root should not have margins or paddings on the "outside".
This means that all spacing between components can be applied by wrapping components inside the ab-container.
| Class (CSS) | Attribute (Web Component) | Type |
|---|---|---|
ab-container--p-{100 to 900} | p="100 to 900" | Padding on all sides |
ab-container--px-{100 to 900} | px="100 to 900" | Horisontal padding |
ab-container--py-{100 to 900} | py="100 to 900" | Vertical padding |
ab-container--pt-{100 to 900} | pt="100 to 900" | Top padding |
ab-container--pb-{100 to 900} | pb="100 to 900" | Bottom padding |
ab-container--pl-{100 to 900} | pl="100 to 900" | Left padding |
ab-container--pr-{100 to 900} | pr="100 to 900" | Right padding |
| Class | Attribute (Web Component) | Type |
|---|---|---|
ab-container--m-{100 to 900} | m="100 to 900" | Margin on all sides |
ab-container--mx-{100 to 900} | mx="100 to 900" | Horisontal margin |
ab-container--my-{100 to 900} | my="100 to 900" | Vertical margin |
ab-container--mt-{100 to 900} | mt="100 to 900" | Top margin |
ab-container--mb-{100 to 900} | mb="100 to 900" | Bottom margin |
ab-container--ml-{100 to 900} | ml="100 to 900" | Left margin |
ab-container--mr-{100 to 900} | mr="100 to 900" | Right margin |