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

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 laborum.

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

Play

Header 3

Play

Header 4

Play

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
1. 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
1. 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
1. 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 and Column helpers as demonstrated in the “Two images” tab.

If your content is full width, you don’t need Row and Column

Header 3

If your content is full width, you don’t need Row and Column

Header 4

If your content is full width, you don’t need Row and Column

Headers and Code

Header 2

components/Accordion/Accordion.js
<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

components/Accordion/Accordion.js
<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

components/Accordion/Accordion.js
<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

Play

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 List

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
Item with a nested item
1. 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

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

If your content is full width, you don’t need Row and Column

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

components/Tabs/Tabs.js
<Tab label="Two images">
<Row>
<Column colSm={6} colLg={6}>
Column one
![](/images/poster.png)
</Column>
<Column colSm={6} colLg={6}>
Column two
![](/images/poster.png)
</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

Edit this page on GitHub