Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading Level 1 - Main Title

This is a paragraph demonstrating regular paragraph text. It contains multiple sentences to show how paragraphs flow and wrap naturally. Paragraphs are the foundation of written content and provide the basic structure for conveying information to readers.

Heading Level 2 - Section Title

This paragraph follows an H2 heading. H2 headings are used for major sections within a document. They help organize content into logical chunks and improve readability.

Here is another paragraph right after the previous one. This demonstrates how paragraphs stack when they appear consecutively without any other elements between them. The spacing should be consistent and readable.

And here is a third consecutive paragraph. This pattern of multiple paragraphs in a row is very common in articles, blog posts, and other written content. It’s important to test how these look with your current typography settings.

Heading Level 3 - Subsection

This paragraph follows an H3 heading. H3 headings are used for subsections within H2 sections, providing further organization and hierarchy to the content structure.

Heading Level 4 - Sub-subsection

This paragraph follows an H4 heading. H4 headings provide even more granular organization, breaking down H3 sections into smaller, more specific topics.

Heading Level 5 - Minor Subsection

This paragraph follows an H5 heading. H5 headings are used for very specific subdivisions, though they are less commonly used in most documents.

Heading Level 6 - Smallest Subsection

This paragraph follows an H6 heading. H6 is the smallest heading level and is rarely used, but it’s available when you need the deepest level of content hierarchy.

A small element

A link

This paragraph demonstrates various text formatting options within a single block. You can see italic text at the beginning, and more italic text later in the sentence. This shows how formatting can be applied throughout a paragraph.

This second paragraph contains a link to the homepage embedded within the text, along with bold text for emphasis. You can also use italicised text for subtle emphasis and inline code to reference technical terms or code elements within regular paragraph text.

An item
An item
An item
An item
An item

Item one
Item two
Item three
Item four
Item five

A simple blockquote

Some HTML…

<blockquote cite="http://www.imdb.com/title/tt0284978/quotes/qt1375101">
  <p>You planning a vacation, Mr. Sullivan?</p>
  <footer>
    <a href="http://www.imdb.com/title/tt0284978/quotes/qt1375101">Sunways Security Guard</a>
  </footer>
</blockquote>

…CSS…

blockquote {
  text-align: center;
  font-weight: bold;
}
blockquote footer {
  font-size: .8rem;
}

…and JavaScript

const blockquote = document.querySelector("blockquote")
const bolden = (keyString, string) =>
  string.replace(new RegExp(keyString, 'g'), '<strong>'+keyString+'</strong>')

blockquote.innerHTML = bolden("Mr. Sullivan", blockquote.innerHTML)

Single line of code

HTML Includes

Buttons

A button A button with leading icon A button with trailing icon

<div class="button-row">
  <a href="https://www.bitcointrader.com" class="button">A button</a>
  <a href="https://twitter.com/BitcoinTrader" class="button button--x">{% include icon.html id="x-twitter" title="X" %} A button with leading icon</a>
  <a href="https://www.bitcointrader.com" class="button">A button with trailing icon {% include icon.html id="link" title="Link" %}</a>
</div>

Icon include

<div class="icon-row">
  {% include icon.html id="nav" title="Navigation" %}
  {% include icon.html id="x-twitter" title="X (Twitter)" %}
  {% include icon.html id="facebook" title="Facebook" %}
  {% include icon.html id="link" title="Link" %}
  {% include icon.html id="rss" title="RSS" %}
  {% include icon.html id="external-link" title="External Link" %}
</div>

Video include

{% include video.html id="zrkcGL5H3MU" title="Siteleaf tutorial video" %}

Image includes

{% include figure.html image="/assets/images/placeholder_894-600x800.jpg" caption="Image with caption" width="300" height="800" %}

{% include figure.html image="/assets/images/placeholder_894-600x800.jpg" caption="Right aligned image" position="right" width="300" height="800" %}

{% include figure.html image="/assets/images/placeholder_894-600x800.jpg" caption="Left aligned image" position="left" width="300" height="800" %}

{% include figure.html image="/assets/images/placeholder_894-1600x800.jpg" alt="Image with just alt text" %}

Unordered Lists

Unordered lists are great for presenting items without a specific order or sequence:

First item in an unordered list
Second item with some text that wraps to multiple lines to demonstrate how list items handle longer content
Third item
Fourth item with a link inside the list item
Fifth item with bold text and italic text

Nested unordered lists demonstrate hierarchy:

Top-level item one
Top-level item two
- Nested item one
- Nested item two
  - Deeply nested item
  - Another deeply nested item
- Nested item three
Top-level item three

Ordered Lists

Ordered lists are perfect for step-by-step instructions or ranked items:

First step in a process
Second step that might contain longer text to show how ordered lists handle content that spans multiple lines
Third step
Fourth step with an embedded link
Fifth step with emphasis and italics

Nested ordered lists show complex procedures:

Main step one
Main step two
1. Sub-step 2.1
2. Sub-step 2.2
  1. Sub-sub-step 2.2.1
  2. Sub-sub-step 2.2.2
3. Sub-step 2.3
Main step three

Mixed List Types

Lists can be mixed for complex structures:

First ordered item
Second ordered item with nested unordered list:
- Unordered sub-item one
- Unordered sub-item two
Third ordered item

Text Formatting

This paragraph demonstrates various text formatting options. You can use bold text for emphasis, italic text for subtle emphasis, and bold italic text for strong emphasis. You can also use inline code to reference code elements or technical terms.

Links can be inline links or external links that open in a new tab. Links are essential for connecting related content and providing additional resources.

Blockquotes

Blockquotes are used to highlight quoted text or important statements:

This is a blockquote. It typically contains quoted text, important statements, or highlighted information. Blockquotes are visually distinct from regular paragraphs and help draw attention to specific content.

Blockquotes can contain multiple paragraphs and other elements like bold text and links.

This is a second paragraph within the same blockquote, demonstrating how blockquotes can span multiple paragraphs.

Code Blocks

Code blocks are used to display code snippets or technical content:

function example() {
  console.log("This is a code block");
  return true;
}

Code blocks preserve formatting and are useful for displaying:

Programming code
Configuration files
Command-line instructions
Any text that requires exact formatting

Horizontal Rules

Horizontal rules provide visual separation between sections:

This paragraph appears after a horizontal rule, demonstrating how horizontal rules create visual breaks in content.

Tables

Tables are useful for presenting structured data:

Column One	Column Two	Column Three
Row one, cell one	Row one, cell two	Row one, cell three
Row two, cell one	Row two, cell two	Row two, cell three
Row three, cell one	Row three, cell two	Row three, cell three

Definition Lists

Definition lists pair terms with their definitions:

Term One: Definition for term one, which can span multiple lines and contain other elements like bold text and links.
Term Two: Definition for term two, providing another example of how definition lists work.
Term Three: Definition for term three, demonstrating that definition lists can have multiple terms and definitions.

Combined Elements

This section demonstrates how different elements work together:

First, we have an ordered list item.
Second, we have another item with nested content:
- Unordered sub-item
- Another unordered sub-item with italic text
Third, we reference inline code within a list.

A blockquote can contain lists:

Item one in quoted list

Item two in quoted list

This final paragraph wraps up the typography demonstration, showing how all these elements work together to create rich, well-structured content that is both readable and accessible.