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 and 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
Header 3
Header 4
Headers and Images
Header 2
Header 3
Header 4
Headers and 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
and Column
helpers as demonstrated in the “Two images” tab.
If your content is full width, you don’t need Row
and 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
and Column
helpers as demonstrated in the “Two images” tab.
If your content is full width, you don’t need Row
and 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
and Column
helpers as demonstrated in the “Two images” tab.
If your content is full width, you don’t need Row
and Column
Column one
Column two
Headers and Code
Header 2
Header 3
Header 4
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
- 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
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
and Column
helpers as demonstrated in the “Two images” tab.
If your content is full width, you don’t need Row
and 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
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