Text

Text components are the building blocks of your content, helping you create clear, structured, and visually appealing information for your users. Let's dive into each component and see how you can make your text shine.

Headings

Headings are the signposts of your content, guiding users through your information hierarchy. We offer six levels of headings, from h1 to h6.

<h1>Your main title goes here</h1>
<h2>Important section heading</h2>
<h3>Subsection title</h3>
<h4>Minor heading</h4>
<h5>Even smaller heading</h5>
<h6>The smallest heading</h6>

Remember, use headings in order and don't skip levels. It's not just about looks—it's about creating a logical structure that's easy for users to understand.

Best practices for headings

• Although we do provide h1, the sidebar sections are titled starting at h2

• Structure your content with h2 and h3 for main sections and subsections

• Use h4-h6 sparingly for deeper content organization

• Keep headings concise and descriptive. We recommend using sentence case.

Paragraphs

Paragraphs are the workhorses of your content. They carry the bulk of your information and ideas. You can include liquid variables inside them.

<p>Your paragraph text goes here. Fetch data using {{ liquid_variables }}</p>

Links

Use links to link out to external sites, admin internal tools, or pre-formatted queries.

<a href="https://www.example.com">Click here for more information</a>

Code and pre-formatted text

When you need to display code snippets or preserve specific formatting, use the <pre> and <code> tags:

<pre><code>
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('World');
</code></pre>

This will render as:

function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('World');

Tips for code blocks

• Consider adding a copy button for longer code snippets

• For inline code, just use the <code> tag without <pre>

Badges and pills

Badges and pills are great for highlighting status, categories, or other short pieces of information. They add a pop of color and draw attention to important details.

<span class="badge">New</span>
<span class="badge pill">Featured</span>

You can customize the appearance with additional classes:

<span class="badge pill pill--green">Success</span>
<span class="badge pill pill--orange">Warning</span>
<span class="badge pill pill--red">Error</span>

For a deep dive into all the possibilities with badges and pills, check out our articles on badges and pills.