..

Overview all components

This post is designed to stress-test your theme’s typography, spacing, and common Markdown elements. Use this page to ensure your margins, paddings, and font choices look professional across all screen sizes.

• 1. Heading Hierarchy
  • Third-Level Heading (H3)
    • Fourth-Level Heading (H4)
      • Fifth-Level Heading (H5)
• 2. Typography & Inline Styles
• 3. Lists
  • Unordered List
  • Ordered List
• 4. Data Tables
• 5. Task Lists
• 6. Images and Media
• 7. Horizontal Rules

---

1. Heading Hierarchy

Headings are the skeleton of your content. They should have distinct sizes and consistent vertical spacing.

Third-Level Heading (H3)

The H3 should feel like a clear subsection of the H2 above.

Fourth-Level Heading (H4)

Standard for deep dives or minor points.

Fifth-Level Heading (H5)

Rarely used, but should still be styled to look better than plain bold text.

2. Typography & Inline Styles

Good typography is about more than just a font. It’s about how different styles interact within a paragraph.

• This is bold text, used for emphasis.
• This is italicized text, used for titles or subtle emphasis.
• Sometimes you need to strike through an old idea.
• Here is an external link to Google to check your link colors and hover states.

The Blockquote Test: “Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs

Check if this quote has enough indentation, a distinct left border, or perhaps a slight background tint to make it stand out from the body text.

#!/usr/bin/python3
print("HEY!")

3. Lists

Lists can often have spacing issues, especially when nested.

Unordered List

• The first main bullet point.
• The second main bullet point.
  • A nested sub-item (check the indentation!).
  • Another nested sub-item with more text to see how it wraps around to the next line.
• The final bullet point.

Ordered List

1. First step in the process.
2. Second step in the process.
3. Third and final step.

4. Data Tables

Tables are often the “broken” element in responsive themes. Make sure this doesn’t overflow on mobile devices.

Project Name	Category	Status	Priority
Jekyll Theme	Development	In Progress	High
SEO Audit	Marketing	Completed	Medium
User Research	Design	Pending	Low
Bug Fixes	Maintenance	Ongoing	Critical

5. Task Lists

Task lists are a GitHub-flavored Markdown favorite. Check the alignment of the checkboxes.

• Initial theme setup
• Fixed Prettier TOC formatting issue
• Implement Dark Mode toggle
• Optimize image loading

6. Images and Media

Images should be responsive—they should never be wider than their container.

Figure 1: A caption for the image. Is the font smaller? Is it centered? Does it have enough top margin?

7. Horizontal Rules

The line below is a separator (---). It should be visible but not distracting.

---

End of Test Post. If everything looks aligned and the spacing feels “breathable,” your theme is in great shape!