Typography

Display

Display 1

Display 2

Display 3

Display 4

Headings

First Heading H1

This is an example of some paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque eros aliquet mi venenatis, sed mollis velit pretium. Duis luctus id turpis sit amet iaculis. Nulla eget pharetra urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Second Heading H2

Third Heading H3

Fourth Heading H4

Fifth Heading H5

Sixth Heading H6

Text Formating

If you don't care for semantics then you can use bold and italic. However, if you prefer to be semantic, you should go with strong or emphasized text.

Your text can also be _subscripted and ^{superscripted}, inserted, ~~deleted~~, or highlighted.

This is an exciting link that takes you somewhere interesting.

If you like to write about code and display code examples you can use inline code, as well as keyboard input, computer output, and variables.

You might also have need of a citation, short quotation, abbreviation, or definition.

You may wish to finish your day at 5:00pm and head on home to:

1 Nobody Here Street
Springfield, USA

Small text is for fine print. You know? The legal stuff.

Preformatted Text

body {
    color: black;
}
a {
    color: blue;
}

Horizontal Line

Lists

Unordered List

First Unordered List Item
- Nested list item
Second Unordered List Item
Third Unordered List Item

Ordered List

First Ordered List Item
1. Nested list item
Second Ordered List Item
Third Ordered List Item

Definition List

Definition Title One: First definition description
Definition Title Two: Second definition description

Blockquote

This is a Blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque eros aliquet mi venenatis, sed mollis velit pretium. — said Primed

Figure (with Image and Figure Caption)

An Image Example — A Figure Caption Example - Image by Tati Halabi from Pixabay

Tables

This is a table caption
First Name	Last Name	Age	Profession
Footer 1	Footer 2	Footer 3	Footer 4
James	Bond	44	Secret Agent
Darth	Vader	48	Evil Emperor
Dorothy	Gale	15	Adolescent Heroine
John	McClane	42	Cop
Mary	Poppins	30	Nanny
Harry	Potter	16	Wizard
Katniss	Everdeen	18	Archer
Fred	Flintstone	32	Bronto-Crane Operator

This is a table caption
First Name	Last Name	Age	Profession
Footer 1	Footer 2	Footer 3	Footer 4
James	Bond	44	Secret Agent
Darth	Vader	48	Evil Emperor
Dorothy	Gale	15	Adolescent Heroine
John	McClane	42	Cop
Mary	Poppins	30	Nanny
Harry	Potter	16	Wizard
Katniss	Everdeen	18	Archer
Fred	Flintstone	32	Bronto-Crane Operator

Buttons

.button

.button-outlined

.button-secondary

.button-secondary button-outlined

.button disabled

.button-block

.button-outlined .button-block

Forms

Name

Email We'll never share your email with anyone else.

A Fieldset

A paragraph inside a fieldset.

Male

Female

Other

An example of radio buttons inline.

Batman

Wonder Woman

Spiderman

Comment

Level of Experience

I accept the terms and conditions

An example of an inline subscribe form.

Grid

1/2 mobile

1/2 tablet

1/2 desktop

1/3 tablet

2/3 tablet

1/4 tablet

3/4 tablet

2/3 mobile

1/3 mobile

3/4 mobile

1/4 mobile

1/3 desktop

2/3 desktop

1/4 desktop

3/4 desktop