The style guide provides you with a blueprint of Horace default post and page styles. It is also a great reference for suggested typographic treatment and styles for your content.

Headings

Headings help organize content and convey structure. Use <h2> through <h6> elements to create a hierarchy within your writing. An <h1> is reserved for the post or page title.

Heading Level 1

This paragraph sits below an H1 and sets the context for the top-level topic. You can make text bold for strong emphasis, italic for subtle emphasis, and add links.

Heading 2

Use H2 for major sections within a page. It helps readers scan quickly and understand how content is grouped.

Heading 3

H3 breaks a major section into smaller, related parts. It’s useful for multi-step tutorials or grouped concepts.

Heading 4

H4 is ideal for labeling examples, notes, or specific subtopics inside an H3 section.

Heading 5

H5 is smaller and more subtle—handy for callouts, small components, or metadata-like headings.

Heading 6

H6 is the smallest heading. Use sparingly for deeply nested details or inline documentation labels.

Paragraphs & Text Styles

Paragraphs are your default building block. Combine emphasis as needed—bold, italic, and both together. Inline code like display: grid; or `backticks` helps reference snippets without breaking flow.

Lists

Unordered List

Item one
Item two
Item three with bold text

Ordered List

First step
Second step
Third step

Definition List

HTML: The standard markup language for documents designed to be displayed in a web browser.
CSS: The language used to describe the presentation of web pages, including colors, layout, and fonts.

💡

Markdown doesn’t standardize definition lists, but many parsers (including Ghost’s HTML parsing) support them when written as simple HTML. The snippet below is included inline so it’s still one Markdown document.

Code

Use inline code for short fragments, like display: flex;. For longer examples, use fenced code blocks:

<!-- HTML -->
<section class="card">
  <h2>Example Card</h2>
  <p>This is a paragraph inside a section.</p>
</section>

Tables

Tables are useful for displaying structured data. To make them responsive on small screens, wrap each table inside a container <div> or <figure> with the class responsive-table.

This adds horizontal scrolling when the table’s width exceeds the viewport, ensuring content remains readable without breaking layout.

Feature	Description	Supported
Responsive Design	Adapts layout to screen size	✓
Dark Mode	Supports system preference	✓
Custom Fonts	Typography customization options	✓

Blockquotes

Blockquotes are used to highlight quotations, notes, or key excerpts. Below are two visual styles your theme may support — a default and an alternative blockquote.

This paragraph introduces the default blockquote style, which is typically used for standard quotations or callouts.

Creativity needs the support of knowledge to be able to perform at its best.

The paragraph below introduces the alternative blockquote style. You can use it for special callouts, tips, or editorial notes where a different visual treatment helps draw attention.

No matter how cool your interface is, it would be better if there were less of it.

This paragraph appears below the blockquotes, showing how the flow of normal content resumes after blockquote.

Style Guide