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

FIRST LEVEL HEADER

SECOND LEVEL HEADER

THIRD LEVEL HEADER

Fourth Level Header

---

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

First Level sized like a fourth level heading

Details

Accordion

According to research, web users generally prefer writing that is concise, easy to scan, and objective rather than promotional in style. Why does it matter ? On the web, you have less than 15 seconds to grab somebody's attention when they first arrive on your website. On the average Web page, users have time to read at most 28% of the words during an average visit.

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

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