This document is a work in progress.
It is to be used as an internal reference for formatting external KB articles.
- Title Format
- Article Settings
- Labels
- Header Size
- Font Size
- Text Style
- Code Blocks
- Descriptions
- Lists
- Links
- Dynamic Links
- Tables
- Callout blocks
- Images
- Videos
- Accordions
- Tabs
Title Format
Article Titles will follow title case as outlined here: https://capitalizemytitle.com/
As a general rule of thumb, article titles should not have more than 4-6 capitalized words.
Article Settings
The following setting will be used for any external KB:
- Managed by Managers
- Visible to Everyone (Public)
- Open for comments No
- Promote article No
- Author You
- Labels See labels section
Labels
Labels can be matched to relevant search strings to increase their potential relevance in search. This will be done when we need to focus key search terms on specific articles. In other cases, we can refer to the Zendesk best practices for labels.
Header Size
Headers will not exceed size <h3> within the body of an article and will be used in all applicable circumstances instead of changing the text size. Headers will always be used in sequential order:
- Main Section <h3>
- Sub Section <h4>
Header 3 is used for labeling sections within an article and should be capitalized
<h3>This is a Header 3</h3>
Header 4 is used for labeling sub-sections or how-to steps within an article and should be written as a phrase
<h4 class="sub-heading">This is a Header 4</h4>
Example - How to Post a Job
Some general information about posting a job, followed by the actual steps.
To post a job
- You should do this
- Then that
- For this
Font Size
Font Size will be set to 'Default' unless otherwise applicable. In the case of section descriptions, a header should be created instead of changing the font size.
You can use the built-in WYSIWYM editor to change the font size:
You can also adjust the source code:
This is normal text. It will be used in the body of all articles.
<p>This is normal text. It will be used in the body of all articles.</p>
This is a Zendesk large size
<p>
<span class="wysiwyg-font-size-large">This is a Zendesk large size</span>
</p>
This is a Zendesk medium size
<p>
<span class="wysiwyg-font-size-medium">This is a Zendesk medium size</span>
</p>
This is a Zendesk small size
<p>
<span class="wysiwyg-font-size-small">This is a Zendesk small size</span>
</p>
Text Styles
This is italic font-style
<p><em>This is italic font-style</em></p>
This is bold font-style
<p><strong>This is bold font-style</strong></p>
This is superscript font-style.
<p> This is <sup>superscript</sup> font-style.</p>
This is subscript font-style.
<p> This is <sub>subscript</sub> font-style.</p>
This is your underlined text
<p><span class="wysiwyg-underline">This is your underlined text</span></p>
This text is deleted
<p>This text is <del>deleted</del></p>
This is an important marked text that can be used to highlight important information within the body content.
<p>This is <span class="text-primary">an important marked text</span></p>
This is an important yellow text and can be used to highlight actions that could potentially have a negative impact
<p>This is <span class="text-warning">an important yellow text</span></p>
This is how a code looks like:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet. </p>
</body>
</html>
Quotes
"Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"
<div class="callout callout-transparent">
<p>"Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us? Here's a really fancy quote. Can you believe what they say this about us?"</p>
</div>
Description Lists
Description lists can be used to break-up content features or tell the user more about specific sections on a single page. One example might be to provide descriptions to the different terminology on the freelancer profile or to create a glossary of terms.
Horizontal Description List
- Description lists
- Such description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>Such description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
Lists
There are 4 types of lists that we use. For large amounts of content, the standard bullet/underorder list is the cleanest. For smaller content and checklists, the bullet colored list can be used. The ordered list and with colored numbers can be interchanged at your discretion.
Bullet/Unordered List
- bullet list one
- bullet list two
- bullet list three
- bullet list four
- enclosed element one
- enclosed element two
<ul>
<li>bullet list one</li>
<li>bullet list two</li>
<li>bullet list three</li>
<li>bullet list four
<ul>
<li>enclosed element one</li>
<li>enclosed element two</li>
</ul>
</li>
</ul>
Bullet/Unordered List when immediately following a header
- bullet list one
- bullet list two
- bullet list three
- bullet list four
- enclosed element one
- enclosed element two
<ul class="list-with-heading">
<li>bullet list one</li>
<li>bullet list two</li>
<li>bullet list three</li>
<li>bullet list four
<ul>
<li>enclosed element one</li>
<li>enclosed element two</li>
</ul>
</li>
</ul>Bullet Colored List
- bullet list one
- bullet list two
- bullet list three
- bullet list four
<ul class="list-bullet">
<li>bullet list one</li>
<li>bullet list two</li>
<li>bullet list three</li>
<li>bullet list four</li>
</ul>
Ordered List
- bullet list one
- bullet list two
- bullet list three
- bullet list four
- enclosed element one
- enclosed element two
<ol>
<li>bullet list one</li>
<li>bullet list two</li>
<li>bullet list three</li>
<li>bullet list four
<ol>
<li>enclosed element one</li>
<li>enclosed element two</li>
</ol>
</li>
</ol>
Ordered List with Colored Numbers
This type of lists is a great way to display content with longer, step-by-step instructions, descriptions etc.
- Mix flour, cinnamon, salt and starch in a bowl.
- Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
- Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.
- Peel the apples and cut them into small cubes.
- Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.
- Mix flour, cinnamon, salt and starch in a bowl.
- Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.
- Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.
- Peel the apples and cut them into small cubes.
- Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.
<ol class="list-colored">
<li>Mix flour, cinnamon, salt and starch in a bowl.</li>
<li>Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.</li>
<li>Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.</li>
<li>Peel the apples and cut them into small cubes.</li>
<li>Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.
<ol class="list-colored">
<li>Mix flour, cinnamon, salt and starch in a bowl.</li>
<li>Whip the eggs with sugar for 3-4 minutes with an electric wire whisk. The mixture should lighten a little and increase in volume.</li>
<li>Continuing to whisk, gradually add the flour mixture into the egg mixture. Whisk until it is a homogeneous mass.</li>
<li>Peel the apples and cut them into small cubes.</li>
<li>Put in the oven, preheated to 180 degrees, and bake for 30-40 minutes depending on the features of your oven. As soon as the apple pie is covered with golden crust, check the readiness of the dishes with a toothpick.</li>
</ol>
</li>
</ol>
Button Link
The button link can be used to highlight calls to action (i.e. "Verify Your Profile"). In all other circumstances, standard hyperlinks should be used.
<p><a class="btn btn-primary" href="https://www.upwork.com">Click me too!</a></p>
Dynamic Link
A Dynamic Link allows us to set a timer for certain links in the Help Center forms to ensure a minimal number of spam submissions get through. While the dynamic link is not a style feature, we need to include it manually in the links associated with certain forms.
To any URL that will contain the timer, we need to add the following suffix: &nonce=NONE_PARAM
Example:
https://support.upwork.com/hc/en-us/requests/new?ticket_form_id=5183853486483&nonce=1726851031914Tables
The color header table will be used for short tables containing less than 10 items within the list. In the case of long lists exceeding 10 items, the hover-colored table below will be used.
Hover-Colored Table
| Month | Savings |
|---|---|
| January | $100 |
| February | $80 |
| March | $90 |
| Sum | $270 |
<table class="table table-hover">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$90</td>
</tr>
<tr>
<td>Sum</td>
<td>$270</td>
</tr>
</tbody>
</table>
Callout Block
Unless otherwise agreed upon, the success callout should be used in all circumstances. We can use it highlight information within the body of an article, but primarily as a reference for important information at the end of an article.
Success Callout
This is a success callout
I'm a success callout!
<div class="callout callout-success">
<h4>This is a success callout</h4>
<p>I'm a success callout!</p>
</div>
Primary Callout
This is a callout
I'm a callout in primary color
<div class="callout callout-primary">
<h4>This is a callout</h4>
<p>I'm a callout in primary color</p>
</div>
Transparent Callout
This is a transparent callout
I'm a transparent callout!
<div class="callout callout-transparent">
<h4>This is a transparent callout</h4>
<p>I'm a transparent callout!</p>
</div>
Images
Images can be centered or floated with wrapped text but formatting should always be checked on mobile before articles and published.
Image Lightbox
<p><a class="image-with-lightbox" href="/hc/article_attachments/360019300373/image-sample.png"><img src="https://support.upwork.com/hc/article_attachments/360019300373/image-sample.png" width="400" /></a></p>
Images with gallery
<div class="gallery-with-lightbox">
<a href="/hc/article_attachments/360018585694/request-refund.png">
<img src="https://support.upwork.com/hc/article_attachments/360018585694/request-refund.png" />
</a>
<a href="/hc/article_attachments/360019297973/request-dispute.png">
<img src="https://support.upwork.com/hc/article_attachments/360019297973/request-dispute.png" />
</a>
</div>
The following template will be used for image galleries outlining how-to steps: screenshots-sample.pdf
Default Images
<p><img src="https://support.upwork.com/hc/article_attachments/360019300373/image-sample.png" /></p>
Videos
We don't have a lot of videos that we need to embed within the Help Center, but this may change as we build out content.
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KtsAGqo-V18>" frameborder="0" allowfullscreen=""></iframe>
</div>
Accordions
We will utilize accordions any time we include an FAQ in an article. They help break-up the content while allowing users to easily find the question they need answered.
All your base are belong to us.
A joji is an ancient mythical beast with the head of lion, the body of a llama, and the wings of a phoenix. It was rumored to have gone extinct in 1202 BC but has been recently seen within the halls of the Upwork office.
Shazbot!
<div class="accordion accordion-default">
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
</div>
All your base are belong to us.
A joji is an ancient mythical beast with the head of lion, the body of a llama, and the wings of a phoenix. It was rumored to have gone extinct in 1202 BC but has been recently seen within the halls of the Upwork office.
A joji is an ancient mythical beast with the head of lion, the body of a llama, and the wings of a phoenix. It was rumored to have gone extinct in 1202 BC but has been recently seen within the halls of the Upwork office.
A joji is an ancient mythical beast with the head of lion, the body of a llama, and the wings of a phoenix. It was rumored to have gone extinct in 1202 BC but has been recently seen within the halls of the Upwork office.
Shazbot!
<div class="accordion accordion-default accordion-faq">
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
</div>
All your base are belong to us.
A joji is an ancient mythical beast with the head of lion, the body of a llama, and the wings of a phoenix. It was rumored to have gone extinct in 1202 BC but has been recently seen within the halls of the Upwork office.
Shazbot!
<div class="accordion accordion-style-clean">
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-title">Accordion item</div>
<div class="accordion-item-content">
<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>
</div>
</div>
</div>
Tabs
Tabs are used to display small amounts of categorized information. They can also be used to create menus within articles.
Tabs style by default:
<div class="nav-tabs-container">
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis officiis doloremque, harum magnam architecto eveniet nobis culpa sunt sequi distinctio ea ducimus pariatur dolores modi, alias maxime accusamus asperiores aliquid!
</div>
<div class="tab-pane" id="profile">
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.
</div>
<div class="tab-pane" id="messages">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio consequuntur nobis ullam eligendi ratione fugit, reprehenderit. Praesentium illo esse natus! Soluta nisi quo quidem libero commodi non accusantium velit tempore.
</div>
<div class="tab-pane" id="settings">
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.
</div>
</div>