Our editor outputs blocks of texts with paragraph tags.

Helper classes needed

Note that we also sprinkle in sibling helper classes with story-body. For example, the t-linkstyle helper gives us the ability to style links like this.

Horizontal Rules

Use a horizontal rule to break up content. A horizontal rule is displayed below.

The hr tag has built in top and bottom margin. We do this because it's normally used as a spacing element and the need for cushion is assumed.

Headings

Heading 2

Heading 3 - Default

Heading 4

Heading 5

Heading 6

Plugins

Plugins are special and have their own rules for positioning. A div without the plugin class will still align with the story text, but any div prefixed with "c-plugin" will be excluded from the max-width and margin declaration the other elements adhere to.

Example of plugin. Should be not be bound by container.

Example of ad plugin. Should be not be bound by container

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Unordered List (paragraphs)

The first rule sets a sitewide font and a baseline font size of 10px. These are inherited by everything on the page.
Rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. This means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent.
Rule 4 sets the same line-height on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. This will also help to keep the vertical rhythm consistent.

Rules 5 and 6 apply to the description list — we set the same line-height on the description list terms and descriptions as we did with the paragraphs and list items. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier.

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Figure-Caption

A placeholder figure image. — The figcaption element example

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data 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 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 time element example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

Monospace Text wrapped in "pre" tags

List Types

Ordered List

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
  1. List Item 3.2.1
  2. List Item 3.2.2
3. List Item 3.3
List Item 4

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4