HTML Snippet Library

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)

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:

Accordion title 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Accordion title 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Accordion title 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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>

Back to Top

Callouts

Callout blocks are used to call out specific informationmake 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</em>Recommendation
</p>
<p>
Enter your recommendation content here.
</p>
</div>

Back to Top

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>

Back to Top

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

Back to Top

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 ( ibuttonDashboardLectura.png ) to view the students in each status.

How to use it:

<img class="inline" src="/hc/article_attachments/360103504573/ibuttonDashboardLectura.png"

Back to Top

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:

<p class="link">
<a href="https://imaginelearning.com"><em class="fas fa-external-link-alt">&nbsp;</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>
<p class="link">
<a href="#.pdf" target="_blank"><em class="far fa-file-pdf">&nbsp;</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>

Click Me

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

Back to Top

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.

  1. Set of instructions.
  2. Set of instructions.

    Additional line of instructions.

  3. Set of instructions.

     Note

    Note about this set of instructions.

  4. Set of instructions.
    1. Sub-set of instructions.
    2. Sub-set of instructions.
    3. Sub-set of instructions.
  5. 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">&nbsp;</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>

Back to Top

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>

Back to Top

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:

Tab 1 Tab 2 Tab 3 Tab 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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>

Back to Top

Learning Paths

Learning paths show the user the next steps

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>

Back to Top