Imagine Learning has purchased a Lotus Theme (Mink) for Zendesk that helps create the look/feel and overall user experience in our Customer Care center. These elements, along with a few custom pieces, have been customized to match our corporate branding and to help our customers and clients quickly and easily find answers and solutions as they use Imagine Learning products.
While you can do a lot of your content authoring in the article editor, you will have to open the article source code in order to add and utilize these theme elements.
Use this article as a reference for knowing what elements are available and when to use them, AND for knowing how to add and customize specific elements in your articles as you author content.
- Accordions (Drop-downs)
- Callouts
- Description Lists
- Headings
- Images
- Links
- Lists
- Tables
- Tabs
- Learning Paths
Accordions (Drop-downs)
Accordions are helpful for when you need to toggle between hiding and showing pieces of content based on different parameters. This way, the reader can choose from the accordion heading the information that is most applicable to them and open it with a click of a button.
What it looks like:
How to use it:
<div class="accordion accordion--colored">
<div class="accordion__item">
<div class="accordion__item-title">
<strong>Accordion title 1</strong>
</div>
<div class="accordion__item-content">
First accordion content (can include any elements inside this div)
</div>
</div>
<div class="accordion__item">
<div class="accordion__item-title">
<strong>Accordion title 2</strong>
</div>
<div class="accordion__item-content">
Second accordion content (can include any elements inside this div)
</div>
</div>
<div class="accordion__item">
<div class="accordion__item-title">
<strong>Accordion title 3</strong>
</div>
<div class="accordion__item-content">
Third accordion content (can include any elements inside this div)
</div>
</div>
</div>Callouts
Callout blocks are used to call out specific information—make it stand out because it's important and you don't want to reader to miss it. We use 5 different types of callouts:
- Note
- Caution
- Success
- Recommendation
Note
This is a note callout. Use it to call attention to important additional information readers might need to know.
<div class="callout callout--info">
<p class="callout__title">
<em class="fas fa-info-circle"> </em>Note
</p>
<p>
Enter your note content here.
</p>
</div>Caution
This is a caution callout. Use it to give the reader critical information.
<div class="callout callout--danger">
<p class="callout__title">
<em class="fas fa-exclamation-triangle"> </em>Caution
</p>
<p>
Enter your caution content here.
</p>
</div>Success
This is a success callout. Use it to show the reader how to validate their tasks (for example, "If you see student names in the list, then you have successfully completed the task").
<div class="callout callout--success">
<p class="callout__title">
<em class="fas fa-check-square"> </em>Success
</p>
<p>
Enter your success content here.
</p>
</div>Recommendation
This is a recommendation callout. Use it when additional actions are recommended, but not required.
<div class="callout callout--recommendation">
<p class="callout__title">
<em class="fas fa-lightbulb"> </em>Recommendation
</p>
<p>
Enter your recommendation content here.
</p>
</div>Description Lists
Description lists can be used for a number of things. You will most likely use them for one of the following:
- To describe different fields in an interface and provide information the user needs to know to make decisions and complete tasks in that interface.
- To show a list of options with information about what each option does.
Note
You can also use a description table if that seems like a better option.
What it looks like:
- Term or field name
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Term or field name
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Term or field name
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to use it:
<dl>
<dt>Term or field name</dt>
<dd>Term or field description with pertinent information (can include other elements inside this tag)</dd>
<dt>Term or field name</dt>
<dd>Term or field description with pertinent information (can include other elements inside this tag)</dd>
<dt>Term or field name</dt>
<dd>Term or field description with pertinent information (can include other elements inside this tag)</dd>
</dl>Headings
Headings are used throughout articles to divide content into different sections or at the beginning of specific types of information (as is the case with a Step Heading at the beginning of a list of procedural steps).
How to use them:
- Heading 1
- Term or field description with pertinent information (can include other elements inside this tag)
- Heading 2
-
Use Heading 2 if you need to divide an article into different sub-sections.
Try to use only 2 or 3 sub sections in one particular article to avoid creating long pages of content that users will need to scroll through.
<h2>This is a Heading 2</h2>
<p>Content...</p> - Heading 3
-
Use Heading 3 if you need to break up a Heading 2 section into smaller chunks.
Again, use these sparingly and try to avoid creating long pages of content that users will need to scroll through.
<h3>This is a Heading 3</h3>
<p>Content...</p> - Heading 4
- Callouts use Heading 4 as their heading, but that is the only place you should use them. For dividing content in articles, do not use anything smaller than a Heading 3.
- Step Heading
-
Use this element at the beginning of a steps list.
<p class="step">This is a step heading</p>
<ol class="list-colored">
</li>Step 1</li>
...
Images
Using images in Customer Care articles can be very helpful. But keep in mind that as interfaces change, images need to be updated. The rule should be use them when it makes sense, and don't overdo it. You can upload images into Zendesk, or you can reference images that live on an external CDN.
If the image you want to insert is small, just plop it in. If it is large, you'll probably want to use a lightbox (it will display small, but when the reader clicks, a larger version of the image will appear). Here's how you use the Lightbox Image element.
What it looks like:
How to use it:
<p>
<a class="image-with-lightbox" href="full url to image"> <img src="full url to image" width="400"></a>
</p>If you are adding a small UI icon inline with your text, you should use the "inline" class to remove the grey bounding box that automatically displays around the image.
What it looks like:
Click the Information Button ( 
) to view the students in each status.
How to use it:
<img class="inline" src="/hc/article_attachments/360103504573/ibuttonDashboardLectura.png"Links
Links are very important in helping readers find the information they need. Use them as often as is helpful for the reader. For example, when you're referencing a piece of information in another article, link to it. Even when you reference something in the same article, link to it.
If you need to link to a place inside an article (not just the article itself), you will need to insert anchors. Here's how you do that. In the HTML, find a place you want to link to (like a heading). Then add <a name="yourAnchorName"></a>. Like this:
<h2><a name="links"></a>Links</h2>Note
Make sure there are no spaces in your anchor name.
Then when you link to that anchor, your HTML will look like this:
<a href="#links">Links</a>Aside from regular hyperlinks (which need no styling or additional elements in the HTML), our theme uses a couple different types of links. Here are what they look like:
Contents link to other articles in the same section
A brief overview of what type of information reader will find in this article and how it will help them make decisions.
<p class="link">
<a href="https://imaginelearning.com"><em class="fas fa-external-link-alt"> </em>Link to other article in section</a>
</p>
<p class="link-description">
A brief overview of what type of information reader will find in this article and how it will help them make decisions.
</p>A brief overview of what type of information you will find in the PDF.
<p class="link">
<a href="#.pdf" target="_blank"><em class="far fa-file-pdf"> </em>Link to open PDF</a>
</p>
<p class="link-description">
A brief overview of what type of information reader will find in the PDF.
</p><p>
<a class="btn btn--primary" href="https://imaginelearning.com">Click Me</a>
</p>Note
If you want the hyperlink to open in a new browser tab, add target="_blank" to the tag. Like this:
<a href="https://imaginelearning.com" target="_blank">Corporate Website</a>Lists
Use lists to organize information for the reader. Use regular unordered (bullet) lists, as explained below. When you use ordered (numbered) lists for steps in a task, use the template element below.
To create regular unordered (bullet) lists, no styling is necessary:
- Bullet
- Bullet
- Bullet
- Bullet
- Bullet
- Bullet
<ul>
<li>Bullet</li>
<li>Bullet</li>
<li>
Bullet
<ul>
<li>Bullet</li>
<li>Bullet</li>
</ul>
</li>
<li>Bullet</li>
</ul>This is what an ordered (numbered) list looks like when you need a list of steps in a task.
Note
Make sure you use a Step Heading at the beginning of a steps list.
- Set of instructions.
- Set of instructions.
Additional line of instructions.
- Set of instructions.
Note
Note about this set of instructions.
- Set of instructions.
- Sub-set of instructions.
- Sub-set of instructions.
- Sub-set of instructions.
- Set of instructions.
This is what it looks like in the HTML. Use the list-colored class in the <ol> tag, like this:
<ol class="list-colored">
<li>Set of instructions.</li>
<li>
Set of instructions.
<p>Additional line of instructions.</p>
</li>
<li>
Set of instructions.
<div class="callout callout--info">
<p class="callout__title">
<em class="fas fa-info-circle"> </em>Note
</p>
<p>Note about this set of instructions.</p>
</div>
</li>
<li>
Set of instructions.
<ol>
<li>Sub-set of instructions.</li>
<li>Sub-set of instructions.</li>
<li>Sub-set of instructions.</li>
</ol>
</li>
<li>Set of instructions.</li>
</ol>Tables
Tables are a great way to format information in a way that is readable for the reader. Feel free to use them wherever it is helpful.
Here's what a regular table looks like:
| Heading | Heading |
|---|---|
| Content | Content |
| Content | Content |
| Content | Content |
| Content | Content |
And here's how you use it. Make sure you add the table and table--color-header classes to the <table> tag.
<table class="table table--color-header">
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>This is a description table. You can use it when describing fields in a user interface, or when listing different options available to the reader to help them complete a task.
| Term/Field | Description |
|---|---|
| Term/Field Name | Description and information |
| Term/Field Name | Description and information |
| Term/Field Name | Description and information |
| Term/Field Name | Description and information |
The only styling change is that you need to put a term class on the first column <td> tags for the table, like this:
<table class="table table--color-header">
<thead>
<tr>
<th>Term/Field</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="term">Term/Field Name</td>
<td>Description and information</td>
</tr>
<tr>
<td class="term">Term/Field Name</td>
<td>Description and information</td>
</tr>
<tr>
<td class="term">Term/Field Name</td>
<td>Description and information</td>
</tr>
<tr>
<td class="term">Term/Field Name</td>
<td>Description and information</td>
</tr>
</tbody>
</table>Tabs
Like accordions, tabs let you group chunks of different, but related, pieces of content. Think of them like articles inside of an article. Here's what they look like:
Here's how you use this element in the HTML:
<div class="tabs tabs--colored-2">
<div class="tabs-menu">
<span class="tabs-link is-active">Tab 1 Name</span>
<span class="tabs-link">Tab 2 Name</span>
<span class="tabs-link">Tab 3 Name</span>
<span class="tabs-link">Tab 4 Name</span>
</div>
<div class="tab">
Content for tab 1. Use any elements inside this div.
</div>
<div class="tab is-hidden">
Content for tab 2. Use any elements inside this div.
</div>
<div class="tab is-hidden">
Content for tab 3. Use any elements inside this div.
</div>
<div class="tab is-hidden">
Content for tab 4. Use any elements inside this div.
</div>
</div>Learning Paths
Learning paths show the user the next steps
-
Step 1
-
Step 2
-
Step 3
How to use Learning Paths
<div class="courseware learning-path-container">
<ul>
<li>
<p><strong>Step 1</strong></p>
<p><a href="#" target="_blank" rel="noopener">Step One Information</a></p>
</li>
<li>
<p><strong>Step 2</strong></p>
<p><a href="#" target="_blank" rel="noopener">Step Two Information</a></p>
</li>
<li>
<p><strong>Step 3</strong></p>
<p><a href="#" target="_blank" rel="noopener">Step Three Information</a></p>
</li>
</ul>
</div>