This post is a full length post to test typographical elements. It will show every common markdown element, custom elements specific to the theme, and potential elements used by others. Let’s start with Headers.

Header Spacing can look odd when headers are stacked since this is not a normal use case. Also, this style of note is created using a paragraph tag with a note class.

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text. This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text. This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text. This is a basic paragraph of text that will demonstrate the default font-size, line-heights, and other settings that allow for extremely readable text.

At times, you can use bold or italics for emphasis.

You can even highlight text as well.

And what blog post doesn’t have links?

This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote. This is another paragraph that will lead into a blockquote.

This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote. This is a standard, commonly used blockquote.

But if you use HTML, you can create a blockquote that includes citations such as this one.- Quote Source

You can even make blockquotes large by adding a .large class to your blockquote html. And it works with references as well!Yes, it does!

Let’s talk about code. You can have inline code or you can have code blocks:

<div>
<p>This is some basic HTML demonstrated in a code block.</p>
</div>

This is a paragraph with a note class.

This is a paragraph with an alert class.

This is a paragraph with an aside class.

This is a paragraph with a callout class.

There is another powerful element you can use with Sumo called a page fold. All you need to do is create a div with the class .page-fold and the magic will happen. Here’s an example:

Here’s a random long length header to transition us to lists

1. This is a numbered list
2. Items will show up as expected
3. Throughout the list

Here’s some random text to break up the two lists.

• This is an unordered list
• Items will show up as expected
• Throughout the list

Footnotes can be important¹, so here’s a test of a couple² of those directly in line.

And who could forget tables? They’re seldom used, but can still be vital to presenting data. Below is a basic table with dummy content. Tables are not fully styled by default due to the extremely wide variance in use cases.

Lastly, just some more text to break up things. Thanks for checking this out!