Style Guide

A visual style guide demonstrating the theme's typography, margins, lists, blockquotes, tables, and media formatting.

Style Guide

Welcome to the Style Guide. This page is designed to showcase all the typographic styles, formatting elements, and layout patterns available within the theme. It serves as a visual playground for testing the theme's design system, margins, line heights, and typography pairing.

Typography & Headings

Good typography is silent; it is the skeleton that supports the architecture of words. The theme has been built with an elegant, responsive typographic scale that adapts seamlessly across all devices.

Heading Level One (H1)

This is a standard paragraph following an H1 heading. It displays the primary paragraph typography including size, line-height, margin, and weight configuration.

Heading Level Two (H2)

This is a standard paragraph following an H2 heading. Notice the spacing above and below headings to ensure high legibility and breathing room.

Heading Level Three (H3)

This is a standard paragraph following an H3 heading. H3 headings are typically used to split sub-sections of a long essay or article.

Heading Level Four (H4)

This is a standard paragraph following an H4 heading. Typically used for secondary elements or sidebar widgets.

Table

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Data content 1 Data content 2 Data content 3 Data content 4 Data content 5
Data content 1 Data content 2 Data content 3 Data content 4 Data content 5
Data content 1 Data content 2 Data content 3 Data content 4 Data content 5
Data content 1 Data content 2 Data content 3 Data content 4 Data content 5
Data content 1 Data content 2 Data content 3 Data content 4 Data content 5

Markdown

MarkDown Title Bold
MarkDown Title Italic

  • Unordered Item line one
    • Unordered Subitem line one
    • Unordered Subitem line two
    • Unordered Subitem line three
  • Unordered Item line two
  • Unordered Item line three
  1. Ordered Item line one
  2. Ordered Item line two
  3. Ordered Item line three

Good content is easy to read and even easier to remember. Use highlighted text to emphasize important details, spotlight key takeaways, or make essential information stand out at a glance.

Ghost makes linking effortless. Lunex theme to create an instant link, or customize the anchor text to keep your content clean, readable, and engaging.

Buttons

Call to action button

Learn more

Bookmark

Bookmark cards transform ordinary links into beautiful, interactive previews. Simply paste a URL into the Ghost editor, and it automatically fetches the page's metadata—such as the title, description, image, and publisher—to create a visually appealing card. This helps highlight recommended resources, references, articles, and external content without interrupting the reading experience.

Curiosity Fuels Lifelong Learning | The Daily
Curiosity is more than a childhood trait. It is a lifelong habit that encourages learning, strengthens creativity, and helps us navigate a world that never stops changing.

Callouts

🗒️
Callout cards emphasize important notes, tips, or alerts with a visually distinct block that helps key information stand out.
💡
Callout cards emphasize important notes, tips, or alerts with a visually distinct block that helps key information stand out.
🥴
Callout cards emphasize important notes, tips, or alerts with a visually distinct block that helps key information stand out.
⚠️
Callout cards emphasize important notes, tips, or alerts with a visually distinct block that helps key information stand out.

Sign Up

Collapsible (Toggle)

First toggle title

First toggle content goes here

Second toggle title

Second toggle content goes here

Video

0:00
/0:30

Regular video

0:00
/0:30

Regular Video with Thumbnail Image

Audio

audio-thumbnail
Sample example MP3 700KB
0:00
/42.008345

Upload Media

Product

Product Name

Product description goes here


Embeds

YouTube Video


Vimeo Video