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

#fullArticle dt {
  background: #5291C8;
}
	

Tables

Generic Table

Striped table

Add class="table-striped"

Bordered table

Add class="table-bordered"

Callouts

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

Dashed Borders

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

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