import { Meta } from '@storybook/addon-docs/blocks';
import { SpacingTable } from '../../.storybook/custom/components/Tables';
import './spacingStyles.css';

<Meta title="Foundations/Spacing" />


## Spacing

The Radial grid is responsive and adapts to different screen sizes. We use specific grids and spacing to keep consistent around the site.


Radial spacing has three related tokens: Compact, Default, and Loose. Below are a few examples of how Radial spacing is used.

<SpacingTable />

### Spacing Usage
Below you'll find a list of where different types of spacing are typically found

| Name | Usage |
|--|--|
| Space 1 | Inline iconography - ADD EXAMPLE IMAGE |
| Space 2 | Below eyebrows and kickers - ADD EXAMPLE IMAGE |
| Space 3 | Below Headlines, between thumbnails and descriptions - ADD EXAMPLE IMAGES |
| Space 4 | Between paragraphs, spacing between icon-only links (social) - ADD EXAMPLE IMAGE |
| Space 5 | Around ads, above headlines, between columns of list items. Medium padding for modules (ex. mid-page donation pop-up) - ADD EXAMPLE IMAGES |
| Space 6 | Used between major molecules (ex. Article intro and media figure, or comments and recirc. - ADD EXAMPLE IMAGES |
| Space 7 | N/A |
| Space 8 | Above footer, homepage interruptors, large padding for modules (ex. Newsletter interruptor signup molecule) - ADD EXAMPLE IMAGES |
| Space 9 | N/A |
| Space 10 | N/A |
| Space 11 | Below pagination - ADD EXAMPLE IMAGE |

**Spacing Examples**
<img alt="Card Component demonstrating spacing between text elements" src="./images/Foundations-Spacing-DefaultSpacingExample.png" width="579" />