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 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. 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
- bullet list one
- bullet list two
- bullet list three
- bullet list four
Nested Ordered list
- bullet list one
- bullet list a
- bullet list b
- 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>
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>