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 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 normal text. Let's do a bunch of this. This is normal text. Let's do a bunch of this.


Blockquotes

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

Pre Text

Here's some text in a pre tag Here's some text in a pre tag Here's some text in a pre tag Here's some text in a pre tag
	

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

Description Lists

For longer, step-by-step instructions, description lists are a great way to display content. Here's a great example, and you can find more details in our definition lists article.

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

Note

By default, the number background in description lists is gray. We're using custom CSS to make our number background blue in other articles.

#fullArticle dt {
  background: #5291C8;
}
	

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". Ex. 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="//d33v4339jhl8k0.cloudfront.net/docs/assets/524448053e3e9bd67a3dc68a/images/524de2b6e4b0c69bd143471d/file-NMhC2vxJ1w.jpg" class="lightbox"><img src="//d33v4339jhl8k0.cloudfront.net/docs/assets/524448053e3e9bd67a3dc68a/images/524de2b6e4b0c69bd143471d/file-NMhC2vxJ1w.jpg"></a>
	

Still stuck? How can we help? How can we help?