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

 Here's some text in a pre tag. 
This is great for code snippets, where
	placement and	spacing 
may be more important.

Lists

Bullet/unordered list

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

Ordered list

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

Nested Ordered list

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

1: This is how you do step #1
2: And this is how you do step #2
3: Finally, this is step #3

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

Month	Savings
Sum	$270
January	$100
February	$80
March	$90

Striped table

Add class="table-striped"

Month	Savings
January	$100
February	$80
March	$90
Sum	$270

Bordered table

Add class="table-bordered"

Month	Savings
January	$100
February	$80
March	$90
Sum	$270

Callouts

This is a yellow callout

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

<section class="callout-yellow">
  <h3>This is a yellow callout</h3>
  <p>Just add class="callout-yellow". It's really that easy.</p>
</section>

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"

<section class="callout-yellow dashed">
  <h3>This is a yellow dashed callout</h3>
  <p>Just add class="callout-yellow dashed". It's really that easy.</p>
</section>

Image Styles

By default, images include a rounded border:

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

This is an image caption.

<img class="noBdr" src="image/path/here">
<span class="image-caption">This is an image caption.</span>

<figure> 
	<img src="image/path/here"> 
	<figcaption>This is an image caption.</figcaption> 
</figure>

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:

<a href="https://s3.amazonaws.com/helpscout.net/docs/assets/524448053e3e9bd67a3dc68a/images/524de2b6e4b0c69bd143471d/file-NMhC2vxJ1w.jpg" class="lightbox"><img src="https://s3.amazonaws.com/helpscout.net/docs/assets/524448053e3e9bd67a3dc68a/images/524de2b6e4b0c69bd143471d/file-NMhC2vxJ1w.jpg"></a>

Link to a Contact Modal

Create a link to your Docs contact form in a modal window by using a specific link. Note: This link does not work within Beacon.

<a href="#contactModal" data-toggle="modal" class="contactUs">Contact Us</a>