Site Typography.

Heading Formats.

The H1 tag is used for the most important heading on a webpage—usually the page title. Each page should have only one H1, as it sets the tone and context for all other content. It tells both users and search engines what the page is about. Visually, the H1 is often the largest text on the page and may be styled to stand out prominently. Avoid using H1 for decorative or repeated elements like logos or navigation items.

When writing an H1, aim for clarity and relevance. It should summarize the page’s content in a concise, keyword-friendly way. For example, on a blog post, the article title would be your H1. On a product page, it might be the product name. Consistency across your site helps users build trust and improves SEO. Structurally, the H1 sits at the top of the hierarchy, and all other heading tags should nest below it in logical order.

Adding the <em> tag to part of the heading will alter the text styling within that heading as demonstrated.  the <em> tag is the italic option in the HTML editor. The first block of text after a H1, H2 or H3 tag will automatically be styled to be larger than the subsequent paragraph blocks

Normal Heading.

Use H2 tags to define the main sections of your content. These headings are second in the hierarchy and sit directly beneath the H1. For instance, in a blog post, H2s might break the content into major themes or chapters, such as "Introduction," "Features," or "Conclusion." In documentation or landing pages, H2s often represent core ideas or groupings of related information.

You can use multiple H2 tags on a page, as long as they represent distinct, high-level sections. They help users scan the page and quickly find what they’re looking for. From an accessibility standpoint, screen readers often allow users to jump between H2s, so using them consistently improves usability.

Visually, H2s should be clearly distinguished from H1 and body text, but not overpowering. Keep the wording clear and informative, and avoid using decorative or overly vague headings. H2s also carry SEO weight, so using relevant keywords where natural can enhance discoverability.

Sub heading.

The H3 tag is used to organize content within an H2 section. If H2s are the main chapters, H3s are the subheadings or key points inside those chapters. For example, under an H2 titled "Features," H3s might include "User-Friendly Interface," "Customizable Settings," or "Security Options."

Using H3s improves content structure and readability, especially for longer pages. They allow readers to skim and dive deeper into specific details. They should be used consistently, and only when necessary—don’t insert H3s just for visual variety. If there's only one paragraph under an H2, you likely don’t need an H3.

In design, H3s should be visually smaller than H2s but still distinct from body text. Tone-wise, they should be descriptive and help guide the reader through the content logically. Avoid using H3s where an H2 or paragraph would suffice—always think in terms of content hierarchy, not just aesthetics.

Statement H4 Heading.

H4 tags are typically used when content needs an additional level of structure under an H3. They’re best for elaborating on finer details, such as bullet sections or subsections within a subsection. For instance, if your H3 is "Customizable Settings," your H4s might be "Theme Options," "Font Choices," and "Layout Controls."

While H4s are helpful for organizing dense or technical content, they should be used sparingly. Overuse can make your structure overly complex and harder to follow. Ensure there’s a clear need before introducing H4s—if it doesn't help break the content meaningfully, consider using lists or styled paragraphs instead.

Stylistically, H4s are smaller and less prominent than H3s. They should still be easy to differentiate visually, but they often appear more subtle in the hierarchy. Consistency is key: once you introduce H4s in a section, maintain the structure across similar sections of the site.

Small Statement H5 Heading.

The H5 tag is used for very specific, granular breakdowns of content—typically under an H4. In practice, H5s are rare and are generally reserved for highly detailed or layered information, such as complex documentation, specifications, or academic-style pages.

Use H5s only when you need to clarify or separate very specific ideas. For example, under an H4 titled "Theme Options," you might use H5s for "Light vs. Dark Mode" or "Custom Color Palettes." If you're frequently needing H5s, it may be a sign that your content should be split into multiple pages instead of nesting deeper.

Visually, H5s should be the smallest and most subtle heading in your design system, while still maintaining clear typographic contrast. Avoid using H5s purely for styling or decoration—remember, they indicate structure, not appearance.

From a user and SEO standpoint, H5s carry less weight but still contribute to the overall semantic clarity of your content. When used wisely, they can add depth and precision to complex information.

List types.

Unordered List

Used when the order of items doesn’t matter—think bullet points.

• an unordered list
• shows bullet points
  • has multiple levels
  • can even go further
    • like this
    • and this
• bullets are flush with the left hand side of the text edge
• another bullet point

Ordered List

Used when the order of items does matter—like steps or rankings.

1. an ordered list
2. shows numericals
   1. also has multilevels
   2. that auto count up
3. numbers are flush with the left hand side of the text edge
4. and that's it

Quotations

A Quote element using <blockquote>

"The greatest glory in living lies not in never falling, but in rising every time we fall. The way to get started is to quit talking and begin doing. Your time is limited, don't waste it living someone else's life. Don't be trapped by dogma, which is living the result of other people's thinking. Don't let the noise of other's opinions drown your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary."

Links and Button Options.

Hyperlinks are styled automatically there is no need to bold or underline them or make them italic

Specific CSS classes are needed to create a button like effect for a link in the content

Normal Button - set class to btn

Alt Button - set class to btn and alt

Link Button - set class to btn and link

Dark Button - set class to btn and dark

Light Button - set class to btn and light

White Button - set class to btn and white

Standard Block Text.

The first block of text after any H1, H2 or H3 heading will be written out at a slightly larger font size to engage the reader. This is a design styling choice and can be removed in areas if required (you will need to discuss this with your account manager who will advise on the specifics for your site)

Maecenas neque augue, feugiat nec quam in, rhoncus rhoncus lacus. Nam mattis congue magna, at dapibus lacus ornare non. Maecenas lacinia, ligula porttitor egestas viverra, tellus purus sagittis orci, non semper leo justo at erat. Integer erat velit, finibus sit amet magna eu, pulvinar commodo lectus. Sed nec molestie urna. Ut vel urna porttitor, rutrum justo vel, dapibus eros. Donec ultricies vehicula purus, sed elementum libero venenatis sed. Aliquam erat volutpat. Aliquam placerat nisl pharetra leo malesuada pellentesque.

Quisque porttitor odio dui. Proin at lorem purus. In ut diam condimentum, volutpat nisi eu, pellentesque nisl. Cras porttitor egestas malesuada. Etiam varius auctor lacus a commodo. In placerat ac lacus a faucibus. Cras id cursus metus, at fermentum risus. Nam aliquam interdum quam, sit amet molestie arcu accumsan et. Duis nec arcu mauris. Praesent nec scelerisque lorem.

Suspendisse potenti. Nullam scelerisque facilisis velit. Nullam sit amet facilisis ante. Vestibulum arcu mi, convallis ac placerat non, sagittis at elit. Maecenas fringilla luctus suscipit. Vivamus interdum volutpat vestibulum. Aliquam pretium dignissim leo, sit amet scelerisque est consequat et. Donec eu blandit ligula, vitae tempus turpis. Suspendisse sit amet rutrum lorem.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

• an unordered list
• shows bullet points
  • has multiple levels
  • can even go further
    • like this
    • and this
• bullets are flush with the left hand side of the text edge
• another bullet point

1. an ordered list
2. shows numericals
   1. also has multilevels
   2. that auto count up
3. numbers are flush with the left hand side of the text edge
4. and that's it

Hyperlinks are styled automatically there is no need to bold or underline them or make them italic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate sagittis facilisis. Cras dignissim maximus viverra. Vestibulum cursus massa quis egestas lobortis. Sed vestibulum mi eget dapibus fermentum. Mauris luctus sodales molestie. Aenean rutrum venenatis libero eget aliquet. In in felis eget ligula fermentum hendrerit sit amet id elit.

Maecenas neque augue, feugiat nec quam in, rhoncus rhoncus lacus. Nam mattis congue magna, at dapibus lacus ornare non. Maecenas lacinia, ligula porttitor egestas viverra, tellus purus sagittis orci, non semper leo justo at erat. Integer erat velit, finibus sit amet magna eu, pulvinar commodo lectus. Sed nec molestie urna. Ut vel urna porttitor, rutrum justo vel, dapibus eros. Donec ultricies vehicula purus, sed elementum libero venenatis sed. Aliquam erat volutpat. Aliquam placerat nisl pharetra leo malesuada pellentesque.

Quisque porttitor odio dui. Proin at lorem purus. In ut diam condimentum, volutpat nisi eu, pellentesque nisl. Cras porttitor egestas malesuada. Etiam varius auctor lacus a commodo. In placerat ac lacus a faucibus. Cras id cursus metus, at fermentum risus. Nam aliquam interdum quam, sit amet molestie arcu accumsan et. Duis nec arcu mauris. Praesent nec scelerisque lorem.

Suspendisse potenti. Nullam scelerisque facilisis velit. Nullam sit amet facilisis ante. Vestibulum arcu mi, convallis ac placerat non, sagittis at elit. Maecenas fringilla luctus suscipit. Vivamus interdum volutpat vestibulum. Aliquam pretium dignissim leo, sit amet scelerisque est consequat et. Donec eu blandit ligula, vitae tempus turpis. Suspendisse sit amet rutrum lorem.

Mauris dolor odio, ornare nec egestas eu, pulvinar ut metus. Integer interdum, purus nec vehicula accumsan, magna orci bibendum enim, a viverra neque odio malesuada lectus. Nunc risus ante, vehicula vitae tincidunt id, placerat ut orci. Cras convallis euismod ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam faucibus nisi sit amet nisi hendrerit euismod. Duis lacinia, quam sit amet venenatis condimentum, dui eros ornare libero, at convallis sem metus at massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris sollicitudin tincidunt elit, vel gravida arcu sollicitudin dictum. Quisque aliquam ipsum nec luctus blandit. Sed nec metus pharetra, consectetur magna a, malesuada diam. Sed pharetra commodo tortor, vel consectetur ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vulputate sagittis facilisis. Cras dignissim maximus viverra. Vestibulum cursus massa quis egestas lobortis. Sed vestibulum mi eget dapibus fermentum. Mauris luctus sodales molestie. Aenean rutrum venenatis libero eget aliquet. In in felis eget ligula fermentum hendrerit sit amet id elit.

Maecenas neque augue, feugiat nec quam in, rhoncus rhoncus lacus. Nam mattis congue magna, at dapibus lacus ornare non. Maecenas lacinia, ligula porttitor egestas viverra, tellus purus sagittis orci, non semper leo justo at erat. Integer erat velit, finibus sit amet magna eu, pulvinar commodo lectus. Sed nec molestie urna. Ut vel urna porttitor, rutrum justo vel, dapibus eros. Donec ultricies vehicula purus, sed elementum libero venenatis sed. Aliquam erat volutpat. Aliquam placerat nisl pharetra leo malesuada pellentesque.

Quisque porttitor odio dui. Proin at lorem purus. In ut diam condimentum, volutpat nisi eu, pellentesque nisl. Cras porttitor egestas malesuada. Etiam varius auctor lacus a commodo. In placerat ac lacus a faucibus. Cras id cursus metus, at fermentum risus. Nam aliquam interdum quam, sit amet molestie arcu accumsan et. Duis nec arcu mauris. Praesent nec scelerisque lorem.

Suspendisse potenti. Nullam scelerisque facilisis velit. Nullam sit amet facilisis ante. Vestibulum arcu mi, convallis ac placerat non, sagittis at elit. Maecenas fringilla luctus suscipit. Vivamus interdum volutpat vestibulum. Aliquam pretium dignissim leo, sit amet scelerisque est consequat et. Donec eu blandit ligula, vitae tempus turpis. Suspendisse sit amet rutrum lorem.