Let's look at some HTML elements that will be styled a little bit differently by the theme than browser defaults starting with text formatting.

1. Headings:

All HTML headings, <h1> through <h6>, are available.

H1. Heading example

H2. Heading example

H3. Heading example

H4. Heading example

H5. Heading example
H6. Heading example

2. List Types

Ordered List

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets by default:

  • List Item a
  • List Item b
    • Nested list item 1
    • Nested list item 2
      • Double Nested item 1
      • Double Nested item 2
  • List Item 3

Remove the default list-style and left margin on list items by adding the class list--unstyled. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

3. Blockquotes

For quoting blocks of content from another source within your document.
Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes

4. HTML Tags


Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;

Here are a few examples of code highlighting:

HTML markup:

<!DOCTYPE html>

<h2>The title attribute</h2>

<p title="I'm a tooltip">
Check out the title attribute as a tooltip.


CSS code:

body { 
   background-color: #FFFFF0; 
   font-family: Arial, Verdana, sans-serif; 
   font-size: 18px; 
   color: #00008B;

Javascript code:

var x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;
/// A Note attached to a Diagnostic. This provides more context for a specific
/// error, and optionally allows for FixIts.
public struct Note: Codable {
  /// The note's message.
  public let message: Diagnostic.Message

  /// The source location where the note should point.
  public let location: SourceLocation?

  /// An array of source ranges that should be highlighted.
  public let highlights: [SourceRange]

  /// An array of FixIts that apply to this note.
  public let fixIts: [FixIt]

  /// Constructs a new Note from the constituent parts.
  internal init(message: Diagnostic.Message, location: SourceLocation?,
                highlights: [SourceRange], fixIts: [FixIt]) {
    precondition(message.severity == .note,
                 "notes can only have the `note` severity")
    self.message = message
    self.location = location
    self.highlights = highlights
    self.fixIts = fixIts

  /// Converts this Note to a Diagnostic for serialization.
  func asDiagnostic() -> Diagnostic {
    return Diagnostic(message: message, location: location, notes: [],
                      highlights: highlights, fixIts: fixIts)

Text-level semantics

Styling for common inline HTML5 elements.

The a element example
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example

5. Buttons



6. Tables

# Table_Header_1 Table_Header_2 Table_Header_3 Table_Header_4 Table_Header_5 Table_Header_6 Table_Header_7 Table_Header_8
1 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
2 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
3 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8

7. Image Sizing

Image sizes

Normal image
Wide image
Full width image

Image Gallery

8. Embeds

Auden is a modern magazine style Ghost theme with dark and light theme and membership support
Premium Ghost Themes
Premium Ghost Themes for your Ghost Publication. We offer modern, clean, fast and beautiful designs with great support and regular updates. Get the best theme to give a professional look to your website or blog.
Auden - a Magazine & Membership Ghost Theme
Auden is a Ghost 3.0 Theme. It’s a clean and fast theme suitable for any type of site. It comes with full support of the ghost membership & subscription feature.