Sections

Getting started

Branding

Customization

Enhancing content

Format article content

All of our themes come with a range of content styles that you can use to format your article content.

In this article

Our custom content styles have been designed to make article content more engaging and easier to read.

Notes, warnings and other callouts

Notes can be used to emphasize important information within your article content.

To apply the style, add a class name of .note to an element (typically a <p> tag) using the Source Code view in the Zendesk Guide article editor:

This is an example of a standard note available in all themes. You can apply this style to any content by simply applying the .note class name to a paragraph or container element. 

<p class="note">
  This is an example of a standard note available in all themes.
  You can apply this style to any content by simply applying the <code>.note</code> class name to a 
  paragraph or container element.
</p>

Warning styles can help draw readers attention to critical steps in a process.

To apply the style, add a class name of .warning to an element:

This is an example of a warning section available in all themes. You can apply this style to any content by simply applying the .warning class name to a paragraph or container element. 

<p class="warning">
  This is an example of a warning section available in all themes.
  You can apply this style to any content by simply applying the <code>.warning</code> class name to a 
  paragraph or container element.
</p>

The default styles for both can be found in the theme/elements/_typography.scss Sass file and easily modified to match your company brand. Our Pattern Library also contains some examples of other callout styles that you could use, including tips and different styles for notes and warnings.

Tabs and toggles

Tabs and toggles can make it easier for visitors to find what they’re after by grouping content. You can convert static lists into fully interactive tabs, toggles or accordions using data-attributes, without copying and pasting HTML or changing your actual content.

  • Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

  • 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.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.

<ul data-element="toggles">
  <li data-title="The first toggle title">
    <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p>
  </li>
  <li data-title="The second toggle title">
    <p>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.</p>
  </li>
  <li data-title="The third toggle title">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.</p>
  </li>
</ul>

Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.

<ul data-element="tabs">
  <li data-title="The first tab">
    <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis.</p>
  </li>
  <li data-title="The second tab">
    <p>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.</p>
  </li>
  <li data-title="The third tab">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue justo a metus bibendum dapibus. In imperdiet interdum tincidunt. Nam odio dolor, hendrerit vel eros non, viverra pellentesque tellus. Proin ac elit in leo faucibus gravida. Donec ut neque non augue porttitor mollis a quis eros.</p>
  </li>
</ul>

Typography

There are a variety of elements included in our themes which you can use within article content as well, including:

And much more.

You can also easily create your own custom content styles by combining utilities. For example, a box with a light drop shadow could be used to contain a summary of an article:

Summary

  1. Getting started
  2. Creating articles
  3. Styling articles
<div class="py-3 px-6 border border-radius shadow-sm">
  <h3 class="mt-4">
    Summary
  </h3>
  <ol>
    <li><a href="#">Getting started</a></li>
    <li><a href="#">Creating articles</a></li>
    <li><a href="#">Styling articles</a></li>
  </ol>
</div>

The summary, in turn, could be automatically generated by our Table of Contents plugin.

Questions or feedback about this guide? Let us know