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

Start with <pre> and end with </pre>. 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

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. 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="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>
	
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

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