headings

▼

This project assumes you apply a classes like "a-heading__h2" to every heading or used a scoped class as a wrapper like "s-wysiwyg". Without classes all headings look the same as below

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

By applying the classes like "a-heading__h2" the headings by default look the same as below

Titles are all-caps blocks appearing in UI components

Title 1

Title 2

Title 3

Title 4


Headings are inline headings appearing in content normally part of WYSWIYG text blocks

Heading 2
Heading 3

Heading

▼

By Default headings are an H2 Element with H2 appearance

heading h2 link

▼

H2 Element with link - Includes long text for viewing text wrapping

heading h3 variation

▼

H2 Element w/ H3 Appearance

heading t1

▼

H1 - Title 1 appearance

heading t2 link

▼

H2 Element with link - Includes long text for viewing text wrapping

heading t2

▼

H2 Element with link - Includes long text for viewing text wrapping

heading t3 link

▼

H2 Element with link - Includes long text for viewing text wrapping

heading t4 anchor

▼

H4 Element w/anchor ID, Title 4 Appearance

heading t4 link

▼

H4 Element w/ link, Title 4 Appearance

inline elements

▼

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

paragraph

▼

Default Paragraph This is in Bold, consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

Small Paragraph, consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

Large Paragraph , consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

xLarge Paragraph , consectetur adipiscing elit. This is italic Ut disiuncta sint, quo nihil potest esse perversius. An est aliquid, quod te sua sponte delectet? Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Re mihi non aeque satisfacit, et quidem locis pluribus.

'.a-type--no-trailer' Paragraph has no space after it. One paragraph runs into the next.

'.a-type--no-trailer' Paragraph has no space after it. One paragraph runs into the next.

'.a-type--no-trailer' Paragraph has no space after it. One paragraph runs into the next.

preformatted text

▼ 
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

hr

▼