Spacing Audit

• 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

1. First ordered list item
2. Item with a nested item
   1. Nested list item
   2. Another nested list item

3. This is technically a new ordered list, but we’ve given it the start attribute of 3
4. To continue from the list above
5. The rest of the numbers don’t matter, but the starting number does

6. This is also a new ordered list, but we’ve given it the start attribute of 7
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

• Or hyphens to create list items
• Or hyphens to create list items
• Or hyphens to create list items

Headers and Paragraphs

Header 2

Header 3

Header 4

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

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 2

Header 3

Header 4

Headers and Tables

Header 2

Header 3

Header 4

Headers and Tabs

Header 2

• Text
• Single image
• Two images

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

Column one

Column two

Header 3

• Text
• Single image
• Two images

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

Column one

Column two

Header 4

• Text
• Single image
• Two images

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

Column one

Column two

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>
Copy to clipboard

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>
Copy to clipboard

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>
Copy to clipboard

Paragraph and Video

Paragraph and Image

Paragraph and Lists

1. 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.
2. 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.
   1. 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.
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

Paragraph and Accordion

Paragraph and Tables

Paragraph and Tabs

• Text
• Single image
• Two images

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

Column one

Column two

Paragraph and Code

components/Tabs/Tabs.js
<Tab label="Two images">

<Row>
<Column colSm={6} colLg={6}>

Column one

![](./poster.jpg)

Copy to clipboard

Code & Nested Lists

1. Fist ordered list item

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

   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>
   Copy to clipboard

3. Third ordered list item

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

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

      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>
      Copy to clipboard

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

  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>
  Copy to clipboard

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

    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>
    Copy to clipboard

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.

  A basic 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.

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

    A basic 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.