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.
- The first toggle title
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.
- The second toggle title
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.
- The third toggle title
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:
- Buttons
- Blockquotes
- Boxes
- Custom lists
- Custom links
- Code styles
- Figures and images
- Custom icons
- Tables
- Videos
- Various inline text element
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:
<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