Spacing Audit
This is a demo page to see variations on components before/after headings.
- Headers and Paragraphs
- Headers and Videos
- Headers and Images
- Headers & Lists
- Headers and Accordions
- Headers and Tables
- Headers and Tabs
- Headers and Code
- Paragraph and Video
- Paragraph and Image
- Paragraph and Lists
- Paragraph and Accordion
- Paragraph and Tables
- Paragraph and Tabs
- Paragraph and Code
- Code and Nested Lists
- Notifications and Lists
testing lists
- First ordered list item
- Item with a nested item
- Nested list item
- Another nested list item
- This is technically a new ordered list, but we’ve given it the start attribute of 3
- To continue from the list above
- The rest of the numbers don’t matter, but the starting number does
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
- This is also a new ordered list, but we’ve given it the start attribute of 7
- The rest of the numbers don’t matter, but the starting number does
- Unordered list can use asterisks
- Nested list item
- Nested list item
- Or hyphens to create list items
- Unordered list can use asterisks
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
- Or hyphens to create list items
- Or hyphens to create list items
- Or hyphens to create list items
Headers and Paragraphs
Header 2
I’m a paragraph underneath an h2. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum2.
Header 3
I’m a paragraph underneath an h3. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Header 4
I’m a paragraph underneath an h4. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Headers and Videos
Header 2
Header 3
Header 4
Headers and Images
Header 2
This is a regular caption. It will attempt to respond to it’s container element appropriately.
Header 3
This is a regular caption. It will attempt to respond to it’s container element appropriately.
Header 4
This is a regular caption. It will attempt to respond to it’s container element appropriately.
Headers & Lists
Header 2
- First ordered list item
- Item with a nested item
- Nested list item
- In markdown, the actual numbers don’t matter, just that it’s a number
- Unordered list can use asterisks
- Nested list item
- Or hyphens to create list items
Header 3
- First ordered list item
- Item with a nested item
- Nested list item
- In markdown, the actual numbers don’t matter, just that it’s a number
- Unordered list can use asterisks
- Nested list item
- Or hyphens to create list items
Header 4
- First ordered list item
- Item with a nested item
- Nested list item
- In markdown, the actual numbers don’t matter, just that it’s a number
- Unordered list can use asterisks
- Nested list item
- Or hyphens to create list items
Headers and Accordions
Header 2
- Content Section
- Content Section
- Content Section
Header 3
- Content Section
- Content Section
- Content Section
Header 4
- Content Section
- Content Section
- Content Section
Headers and Tables
Header 2
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
Header 3
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
Header 4
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
Headers and Tabs
Header 2
The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you’ll need to use our
Row
Column
If your content is full width, you don’t need
Row
Column
Column one
Column two
Header 3
The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you’ll need to use our
Row
Column
If your content is full width, you don’t need
Row
Column
Column one
Column two
Header 4
The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you’ll need to use our
Row
Column
If your content is full width, you don’t need
Row
Column
Column one
Column two
Headers and Code
Header 2
<Accordion><AccordionItem title="Title 1">Content Section</AccordionItem><AccordionItem title="Title 2">Content Section</AccordionItem><AccordionItem title="Title 3">Content Section</AccordionItem></Accordion>
Header 3
<Accordion><AccordionItem title="Title 1">Content Section</AccordionItem><AccordionItem title="Title 2">Content Section</AccordionItem><AccordionItem title="Title 3">Content Section</AccordionItem></Accordion>
Header 4
<Accordion><AccordionItem title="Title 1">Content Section</AccordionItem><AccordionItem title="Title 2">Content Section</AccordionItem><AccordionItem title="Title 3">Content Section</AccordionItem></Accordion>
Paragraph and Video
I’m a paragraph above a video. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
I’m a paragraph below a video. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Paragraph and Image
I’m a paragraph above an image. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
I’m a paragraph below an image. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Paragraph and Lists
I’m a paragraph above a list. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- First ordered list item. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Item with a nested item. Lorem ipsum dolor sit amet, consectetur adipiscers
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
- Nested list item. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- In markdown, the actual numbers don’t matter, just that it’s a number
- Unordered list can use asterisks
- Nested list item
- Or hyphens to create list items
I’m a paragraph below a list. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Paragraph and Accordion
I’m a paragraph above an Accordion. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- Content Section
- Content Section
- Content Section
I’m a paragraph below an Accordion. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Paragraph and Tables
I’m a paragraph above a table. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
I’m a paragraph below a table. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Paragraph and Tabs
I’m a paragraph above Tabs. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
The tab component can be used for a variety of content. From text, to images, to columns. If you want to have multiple columns, you’ll need to use our
Row
Column
If your content is full width, you don’t need
Row
Column
Column one
Column two
I’m a paragraph below Tabs. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Paragraph and Code
I’m a paragraph above code. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
<Tab label="Two images"><Row><Column colSm={6} colLg={6}>Column one![](./poster.jpg)</Column><Column colSm={6} colLg={6}>Column two![](./poster.jpg)</Column></Row></Tab>// Make sure you close the wrapper component</Tabs>
I’m a paragraph below code. Lorem ipsum dolor sit amet, consectetur adipiscers elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
Code & Nested Lists
Ordered List-
Fist ordered list item
-
Item with a nested code block. Perspiciatis cupiditate eveniet reprehenderit. Dolores eum dolor at officia qui libero adipisci. Consequuntur culpa qui laudantium iure reiciendis mollitia est eveniet illum. Sunt ut et. Quia earum dolore dolor.
<Accordion><AccordionItem title="Title 1">Content Section</AccordionItem><AccordionItem title="Title 2">Content Section</AccordionItem><AccordionItem title="Title 3">Content Section</AccordionItem></Accordion> -
Third ordered list item
-
Item with nested list. Consequuntur et excepturi aperiam labore accusamus. Fuga itaque ut molestiae quia minus voluptatem iste officiis enim. Reprehenderit et aperiam. Rerum molestiae delectus iusto provident sint cupiditate.
-
Nested list item with code blcok. Consequuntur et excepturi aperiam labore accusamus. Fuga itaque ut molestiae quia minus voluptatem iste officiis enim. Reprehenderit et aperiam. Rerum molestiae delectus iusto provident sint cupiditate.
<Accordion><AccordionItem title="Title 1">Content Section</AccordionItem><AccordionItem title="Title 2">Content Section</AccordionItem><AccordionItem title="Title 3">Content Section</AccordionItem></Accordion>
-
-
Unorderd list item
-
Item with a nested code block. Perspiciatis cupiditate eveniet reprehenderit. Dolores eum dolor at officia qui libero adipisci. Consequuntur culpa qui laudantium iure reiciendis mollitia est eveniet illum. Sunt ut et. Quia earum dolore dolor.
<Accordion><AccordionItem title="Title 1">Content Section</AccordionItem><AccordionItem title="Title 2">Content Section</AccordionItem><AccordionItem title="Title 3">Content Section</AccordionItem></Accordion> -
Unorderd list item
-
Item with nested list. Consequuntur et excepturi aperiam labore accusamus. Fuga itaque ut molestiae quia minus voluptatem iste officiis enim. Reprehenderit et aperiam. Rerum molestiae delectus iusto provident sint cupiditate.
-
Nested list item with code blcok. Consequuntur et excepturi aperiam labore accusamus. Fuga itaque ut molestiae quia minus voluptatem iste officiis enim. Reprehenderit et aperiam. Rerum molestiae delectus iusto provident sint cupiditate.
<Accordion><AccordionItem title="Title 1">Content Section</AccordionItem><AccordionItem title="Title 2">Content Section</AccordionItem><AccordionItem title="Title 3">Content Section</AccordionItem></Accordion>
-
Notifications and Lists
-
a list item. Omnis officiis culpa enim harum qui sint soluta qui nam. Labore minus sunt suscipit reiciendis laudantium nihil dolores quia. Enim quod ea omnis nihil cum. Similique consequatur illum ea libero quam. Earum quis vel fugiat dicta sapiente.
-
another item. Omnis officiis culpa enim harum qui sint soluta qui nam. Labore minus sunt suscipit reiciendis laudantium nihil dolores quia. Enim quod ea omnis nihil cum. Similique consequatur illum ea libero quam. Earum quis vel fugiat dicta sapiente.
-
with a Notification. Omnis officiis culpa enim harum qui sint soluta qui nam. Labore minus sunt suscipit reiciendis laudantium nihil dolores quia. Enim quod ea omnis nihil cum. Similique consequatur illum ea libero quam. Earum quis vel fugiat dicta sapiente.
-