These custom styles have been designed to make article content more engaging and easier to read.
Notes
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:
<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>
Warnings
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:
<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 and titles used for both can be customized directly using theme settings. For more significant changes, the relevant styles 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 can use.
Blockquotes
Use <blockquote>
for quoting blocks of content from another source within your document.
<blockquote class="font-size-lg">
<p>
Success is not defined by the ability to have no complaints, it is defined by the ability to deal with them.
</p>
<footer class="text-gray-500">
Mikkel Svane in <cite title="Source Title">Startupland</cite>
</footer>
</blockquote>
Our themes also include general typography elements as well as:
- Buttons
- Custom list styles
- Custom links styles
- Code styles
- Figure and image styles
- Tables
- Videos
- Support for custom icon sets
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 bg-white 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 itself could be automatically generated by our Table of Contents extension.