This page replaces the original PageMotor Styles reference with the same catalog of elements, grouped by purpose and annotated so you can see what a class does and how to use it at a glance. The old page is still published for comparison.

Headings

Use headings in order — don’t skip a level just to get a certain size. If you need a smaller heading without changing the document outline, style it instead.

Heading One

Heading Two

Heading Three

Heading Four

Standard <h1>–<h4> tags, no class required.

Paragraph & Inline Text

This is a paragraph with a drop cap. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas.

This is Impact Text

Add the impact class to a <p> or <div> for a larger, bolder statement line.

Bold text — <strong>

Italic text — <em>

Highlighted text — class="highlight", mostly used on inline <span> elements.

Centered text — class="center"

This is a standard text link

This is small text — class="small", similar to a caption but without the extra spacing.

This is underlined text

This is strikethrough text. It shows in the editor but not on the live page.

Here _{this is subscript text}

Here ^{this is superscript text}

Blockquotes

This is a standard blockquote

A plain <blockquote>, indented and styled by the theme.

This is an extended blockquote, breaking out of the content column

Add class="extend" to widen any block-level element beyond the text column.

Breakouts, Pullouts & Extensions

extend — stretches an element outside the text column. Good for wide media or code blocks.

breakout — theme-dependent variant for elements that should stand apart from the flow of text.

pullout — theme-dependent variant for pulling a short excerpt out of the surrounding copy.

Lists

Numbered List

1. Black
2. Red
3. Blue

Bullet List

• Black
• Red
• Blue

Callouts

Turn any <p> or <div> into a callout with the callout class. Add note or alert for contextual meaning, and combine with extend or impact if you want a bigger presentational difference.

Buttons

Any link becomes a button with the button class (a real <button> element doesn’t need it). The colors below come from the active Theme’s Design Options, so the class names are suggestions, not rules — any button can be used for any purpose.

Basic Button  Save Button  Delete Button  Action Button  Update Button

button, button save, button delete, button action, button update

Bleeds

A bleed is a full-browser-width colored section, built from div.bleed.{color} > div.container > div.page-content.text. A few of the supported colors:

Also available: salmon, yellow, chartreuse, lime, aquamarine, turquoise, cyan, blue, steel, lavender, orchid, magenta, pink, rose.

Horizontal Break

---

A plain <hr>.