All headings within content pages have anchors. Based on their importance, the size can be changed with data-heading attribute.

TOP LEVEL HEADER

Here's some example text with h1.

SECOND LEVEL HEADER

Here's some example text with h2.

THIRD LEVEL HEADER

Here's some example text with h3.

Fourth Level Header

Here's some example text with h4.

---

Font sizes can be controlled through the use of the data-heading attribute. For example:

<h1 data-heading='4'>Top Level sized like a fourth level heading</h1>

Blockquote

A little learning is a dangerous thing. — Japanese Proverb

Paragraph text

Here's an example of paragraph text that is long enough to show line-height. Here is an example of a link that goes back to the homepage. And here is an example of bold text.

Code within text

Here's an example of mentioning code, like <figure> or display: flex within paragraph text.

Code snippets

/* CSS */
.wrapper-content {
  max-width: 45rem;
  margin: 0 auto;
}

Ordered list

Ordered list will be displayed horizontally until the number of items exceed 3 (in which case the rest collapses in a column).

1. Cats
2. Dogs
3. Horses

Unordered list

• Cats
• Dogs
• Horses

List with longer text

• Here is a list example with more text to illustrate the line-height and spacing between the bullets.
• In my opinion this nuance is often overlooked, resulting in the same amount of space between lines in a single bullet and between the bullets, making it harder to read.
• Both ordered and unordered list using this spacing.