Spacing Audit

This is a demo page to see variations on components before/after headings.

Headers and Paragraphs

Header 1

I’m a paragraph underneath an h1. 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 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 1

Header 2

Header 3

Header 4

Headers and Images

Header 1

Header 2

Header 3

Header 4

Headers and Lists

Header 1

  1. First ordered list item
  2. Item with a nested item
    1. Nested list item
  3. 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 2

  1. First ordered list item
  2. Item with a nested item
    1. Nested list item
  3. 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

  1. First ordered list item
  2. Item with a nested item
    1. Nested list item
  3. 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

  1. First ordered list item
  2. Item with a nested item
    1. Nested list item
  3. 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 1

  • Content Section
  • Content Section
  • Content Section

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 1

TablesAreCool
col 3 isright-aligned\$1600
col 2 iscentered\$12
zebra stripesare neat\$1

Header 2

TablesAreCool
col 3 isright-aligned\$1600
col 2 iscentered\$12
zebra stripesare neat\$1

Header 3

TablesAreCool
col 3 isright-aligned\$1600
col 2 iscentered\$12
zebra stripesare neat\$1

Header 4

TablesAreCool
col 3 isright-aligned\$1600
col 2 iscentered\$12
zebra stripesare neat\$1

Headers and Tabs

Header 1

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.

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.

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

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

Headers and Code

Header 1

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

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

  1. First ordered list item
  2. Item with a nested item
    1. Nested list item
  3. 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

TablesAreCool
col 3 isright-aligned\$1600
col 2 iscentered\$12
zebra stripesare 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 and Column helpers as demonstrated in the “Two images” tab.

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
![color array](images/colors.png)
</Column>
<Column colSm={6} colLg={6}>
Column two
![color array](images/colors.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