Skip to main contentGatsby theme Carbon

Spacing Audit

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

testing lists

  1. First ordered list item
  2. Item with a nested item
    1. Nested list item
    2. Another nested list item
  1. This is technically a new ordered list, but we’ve given it the start attribute of 3
  2. To continue from the list above
  3. The rest of the numbers don’t matter, but the starting number does
TablesAreCool
col 3 isright-aligned\$1600
col 2 iscentered\$12
zebra stripesare neat\$1
  1. This is also a new ordered list, but we’ve given it the start attribute of 7
  2. 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
TablesAreCool
col 3 isright-aligned\$1600
col 2 iscentered\$12
zebra stripesare 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 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

  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

  • 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

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

  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
![](/images/poster.jpg)

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
  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>
  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>
Unordered List
  • 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>
  • 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>

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.