---
title: Docs Style Guide
description: 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 norm
---
[Skip to content](https://hsdemo.frodx.com/en/knowledge/docs-style-guide#main-content)
English
Show submenu for translations
.png?width=550&height=171&name=frodx-logo-new%20(1).png)
- [Sample Contact Page](https://hsdemo.frodx.com/sample-contact)
- [Sample About Page](https://hsdemo.frodx.com/sample-about)
- [Default HubSpot Blog](https://hsdemo.frodx.com/biglytics-blog)
Open main navigation
Close main navigation
- [Sample Contact Page](https://hsdemo.frodx.com/sample-contact)
- [Sample About Page](https://hsdemo.frodx.com/sample-about)
- [Default HubSpot Blog](https://hsdemo.frodx.com/biglytics-blog)
- English
Show submenu for translations
- Contact us
Contact us
How can we help you?
- There are no suggestions because the search field is empty.
1. [Help Center](https://hsdemo.frodx.com/en/knowledge)
2. [Docs](https://hsdemo.frodx.com/en/knowledge/docs)
3. [Formatting Content](https://hsdemo.frodx.com/en/knowledge/docs#formatting-content)
# 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 \ and end with \.
### 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. You'll see examples of this in many of our articles, and you can find more details here: [Use Definition Lists for Detailed Steps](https://5256150.hs-sites.com/knowledge/use-definition-lists-for-detailed-steps)
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](https://docs.helpscout.com/article/1423-customize-your-docs-site#css).
### Tables
#### Generic Table
**Tables can't be imported directly. Please insert an image of your table which can be found [here](https://5256150.hs-sites.com/knowledge/docs-style-guide).**
#### Striped table
Add class="table-striped"
**Tables can't be imported directly. Please insert an image of your table which can be found [here](https://5256150.hs-sites.com/knowledge/docs-style-guide).**
#### Bordered table
Add class="table-bordered"
**Tables can't be imported directly. Please insert an image of your table which can be found [here](https://5256150.hs-sites.com/knowledge/docs-style-guide).**
### Callouts
### This is a yellow callout
Just add class="callout-yellow". It's really that easy.
### 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"`
### Image Styles
By default, images include a rounded border:
Add class="noBdr" to remove the rounded border:
This is an image caption.
### 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:
[](https://s3.amazonaws.com/helpscout.net/docs/assets/524448053e3e9bd67a3dc68a/images/524de2b6e4b0c69bd143471d/file-NMhC2vxJ1w.jpg) Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.Yes No No results found
- [Docs](https://hsdemo.frodx.com/en/knowledge/docs#main-content)
- [Working with Docs](https://hsdemo.frodx.com/en/knowledge/docs#working-with-docs)
- [Formatting Content](https://hsdemo.frodx.com/en/knowledge/docs#formatting-content)
- [Managing Docs in Help Scout](https://hsdemo.frodx.com/en/knowledge/docs#managing-docs-in-help-scout)
- [Help Desk](https://hsdemo.frodx.com/en/knowledge/help-desk#main-content)
- [Mobile Apps](https://hsdemo.frodx.com/en/knowledge/help-desk#mobile-apps)
- [Getting Started](https://hsdemo.frodx.com/en/knowledge/help-desk#getting-started)
- [Productivity](https://hsdemo.frodx.com/en/knowledge/help-desk#productivity)
- [Mailbox and User Settings](https://hsdemo.frodx.com/en/knowledge/help-desk#mailbox-and-user-settings)
- [Working with Conversations](https://hsdemo.frodx.com/en/knowledge/help-desk#working-with-conversations)
- [Account Management](https://hsdemo.frodx.com/en/knowledge/help-desk#account-management)
- [Integrations](https://hsdemo.frodx.com/en/knowledge/help-desk#integrations)
- [Copying Email to Help Scout](https://hsdemo.frodx.com/en/knowledge/help-desk#copying-email-to-help-scout)
- [Reporting](https://hsdemo.frodx.com/en/knowledge/help-desk#reporting)
- [Sample Contact Page](https://hsdemo.frodx.com/sample-contact)
- [Sample About Page](https://hsdemo.frodx.com/sample-about)
- [Default HubSpot Blog](https://hsdemo.frodx.com/biglytics-blog)
[.png?width=550&height=171&name=frodx-logo-new%20(1).png "FrodX")](https://en.frodx.com/)
[mailto:email@email.com](mailto:email@email.com)
Copyright © 2026, GateHub Ltd