Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

Docs Style Guide

This is a Header 1

This is a Header 2

This is a Header 3

This is a header 4

This is a header 5

This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this.

This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this. This is bold text. Let's do a little of this. This is normal text. Let's do a bunch of this. This is italic text. Let's do a little of this. This is normal text. Let's do a bunch of this.

Blockquotes

"Go out on limb. That’s where the fruit is."
Bob Ross
"Not everything that is faced can be changed, but nothing can be changed until it is faced."
James Baldwin

Preformatted Text

Start with <pre> and end with </pre>.

Lists

Bullet/unordered list

  • bullet list one
  • bullet list two
  • bullet list three
  • bullet list four

Ordered list

  1. bullet list one
  2. bullet list two
  3. bullet list three
  4. bullet list four

Nested Ordered list

  1. bullet list one
    1. bullet list a
    2. bullet list b
    3. bullet list c

Description Lists

For longer, step-by-step instructions, description lists are a great way to display content. You'll see examples of this in many of our articles, and you can find more details here: Use Definition Lists for Detailed Steps

By default, the number background in description lists is gray. Use custom CSS to make the background the color you'd like. 

#fullArticle dt { background: #5291C8; }

See more on CSS customization here: Customize Your Docs Site: Use CSS.

Tables

Generic Table

Tables can't be imported directly. Please insert an image of your table which can be found here.

Striped table

Add class="table-striped"

Tables can't be imported directly. Please insert an image of your table which can be found here.

Bordered table

Add class="table-bordered"

Tables can't be imported directly. Please insert an image of your table which can be found here.

Callouts

This is a yellow callout

Just add class="callout-yellow". It's really that easy.

This is a blue callout

Just add class="callout-blue". It's really that easy.

This is a green callout

Just add class="callout-green". It's really that easy.

This is a red callout

Just add class="callout-red". It's really that easy.

This is a gray callout

Just add class="callout". It's really that easy.

Dashed Borders

Just add class="dashed". Example: class="callout-yellow dashed"

Image Styles

By default, images include a rounded border:

Add class="noBdr" to remove the rounded border:

This is an image caption.

Image Lightbox

Help Scout re-sizes images to a maximum width of 1,000px and a maximum height of 800px. You can link to the image and give the link a class="lightbox" to open the large version in a lightbox on click:

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.Yes No No results found