Sample Styles

Sample Styles

Helper Pages

Table of Contents

  1. Headers
  2. Body Copy
  3. Button
  4. Lists
  5. Blockquote
  6. Images

Headers

H1: Header 1

H2: Header 2

H3: Header 3

H4: Header 4

H5: Header 5
Tip #1

If you want to apply header style without header markup, you can do this with header classes. For example, adding class “h3” to an element will style that text like Header 3. EX: <span class="h3">...</span>

Tip #2

Add class=”line” to an H5 for the underline style (or an element with class=”h5″) EX: <p class="h5 line">...</p>)


Body Copy

This is the default output of text on the page. Without additional tags & HTML, this is how text appears. Text can easily be bolded, italicized or linked with the visual editor or simple HTML tags.

This is large text. Nunc molestie justo ut velit interdum, sed scelerisque libero suscipit. Suspendisse potenti.

This is small text. Suspendisse eu quam vel orci rutrum porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ac diam vitae mi dignissim elementum.

Learn about Shortcodes


Button

Sample Button

You can also create buttons with shortcodes. Learn more.


Lists

Unordered List

  • List item 1
  • List item 2
  • List item 3

Ordered List

  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3

List with Class “link-list”


Blockquote

Suspendisse eu quam vel orci rutrum porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent ac diam vitae mi dignissim elementum.

– Source

Images


This is a left-aligned image. Fusce et sagittis nulla, id bibendum risus. Suspendisse facilisis condimentum feugiat. Duis iaculis orci eget turpis faucibus, id porttitor augue porttitor. Mauris condimentum consequat tristique. Fusce lorem felis, elementum et viverra vel, mattis non odio. Mauris vitae dictum metus. Etiam accumsan pellentesque tempor. Aenean a sem aliquam, porttitor tellus et, suscipit arcu. Vivamus mollis fringilla vehicula. Aenean vehicula risus non faucibus dictum. Sed mollis leo ut ante sodales dignissim.

Sagittis nulla, id bibendum risus. Suspendisse facilisis condimentum feugiat. Duis iaculis orci eget turpis faucibus, id porttitor augue porttitor. Mauris condimentum consequat tristique. Fusce lorem felis, elementum et viverra vel, mattis non odio. Mauris vitae dictum metus. Etiam accumsan pellentesque tempor. Aenean a sem aliquam.

Tip

If aligning images to the left or right is having a weird effect on your layout, try adding a horizontal rule <hr/>, a break tag <br/> or a spacer shortcode.

This is a caption

This is a right-aligned image with a caption. Fusce et sagittis nulla, id bibendum risus. Suspendisse facilisis condimentum feugiat. Duis iaculis orci eget turpis faucibus, id porttitor augue porttitor. Mauris condimentum consequat tristique. Fusce lorem felis, elementum et viverra vel, mattis non odio. Mauris vitae dictum metus. Etiam accumsan pellentesque tempor. Aenean a sem aliquam, porttitor tellus et, suscipit arcu. Vivamus mollis fringilla vehicula. Aenean vehicula risus non faucibus dictum. Sed mollis leo ut ante sodales dignissim.

I'd love to stay in touch with you

For from-the-heart letters about life, resilience, and creativity, sign up for With Love & Squalor.

Each letter also contains links to terrific writing from around the web, a collection of Five [Extraordinary] Words, and occasional discounts and previews of upcoming works and creations. Signing up will also nab you the Productivity Journaling with Limitations e-book, a powerful tool to help you dive into analogue planning while living with limitations.

  • This field is for validation purposes and should be left unchanged.

"It feels as lovely as getting a letter in the mailbox to receive a With Love & Squalor email; they are notes of quiet, honest, reflective encouragement that always end on a slant of sunshine.”