Typography Showcase

This page demonstrates all typography styles available in this theme. Use it as a reference when creating content.

Headings

All HTML headings, <h1> through <h6>, are available.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Inline Text Elements

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

HTML is the best thing since sliced bread.

This is some _subscript and ^superscript text.

Press Ctrl + C to copy.

Links

This is a regular link and this is an external link.

Blockquotes

A well-known quote, contained in a blockquote element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lists

Unordered List

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at massa
  • Nested list item one
  • Nested list item two
  • Nested list item three
• Facilisis in pretium nisl aliquet

Ordered List

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
   1. Nested list item one
   2. Nested list item two
   3. Nested list item three
4. Facilisis in pretium nisl aliquet

Definition List

Term 1

Definition for term 1.

Term 2

Definition for term 2.

Term 3

Definition for term 3.

Code

Inline Code

Use inline code for short code snippets like const foo = 'bar';

Code Blocks

// JavaScript example
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

/* CSS example */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

<!-- HTML example -->
<div class="container">
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</div>

# Bash example
npm install
npm run dev

{
  "name": "example",
  "version": "1.0.0",
  "scripts": {
    "dev": "eleventy --serve"
  }
}

Tables

Name	Role	Status
John Doe	Developer	Active
Jane Smith	Designer	Active
Bob Johnson	Manager	Inactive

Horizontal Rule

Content above the rule.

---

Content below the rule.

Images

Details / Summary

Click to expand

This is the hidden content that appears when you click the summary. It can contain any HTML elements.

• Item one
• Item two
• Item three

Address

Company Name
123 Street Address
City, State 12345
info@example.com