This is the Page Intro. This style of text is identical to the H1 Format in the Page Content editor, but should only be used here in the introduction. When adding page content, the H2 should be used as the primary header style, followed by H3 and H4.

Fonts

Gotham Bold

The five boxing wizards jump quickly.

Mercury Roman

The five boxing wizards jump quickly.

Mercury Italic

The five boxing wizards jump quickly.

Mercury Bold

The five boxing wizards jump quickly.

Fallback Font Stacks

In the event a digital project is unable to support Mount Vernon's ScreenSmart® fonts through a cloud.typography sync, the following are approved fallback font stacks for your CSS:

Gotham:

Open Sans (google font), Tahoma, Ariel

Mercury:

Noto Serif (google font), Georgia, Times

Colors

Darker Colors

#002C3D

#6C4216

#46141C

#4C4A16

#00597A

#D9852D

#8D2838

#98942C

#4E3010

#353622

#36302A

#003030

#9D6120

#6A6D45

#6C6054

#006160

Lighter Colors

#009BBB

#D0941F

#BF2B45

#E2DD66

#70A7D0

#F0B336

#9A656C

#D8D592

#C8E3E2

#F5D258

#F0C7B6

#F5E8A8

#8F7B64

#959C72

#A2988F

#2FB2AB

#BD9F62

#B5BB91

#B8B9B7

#96C9BC

#F5E8A8

#DBDABC

#E3E0DA

#C1D3CA

Header Navigation Pairings

#BF2B45

#009BBB

#D9852D

#9A656C

#46141C

#002C3D

#36302A

#002C3D

#2FB2AB

#98942C

filler

#003030

#36302A

Donation Colors

#853E96

#59136A

#2E0A37

Basic Content Styles

H1: Primary Header

As mentioned in the Page Intro, this style should not be used within regular Page Content.

H2: Secondary Header

This header provides an easy way to break your page up into Sub Sections.

H3: Tertiary Header

The Third Level Header is used to separate sub sections with a clear sense of hierarchy within a Sub Section.

H4: Quaternary Header

The Fourth Level Header provides yet another level to help break a page up into easily digested sections.

H5: PENTERNARY HEADER

The Fifth Level Header can be used as an alternate to the bold style

Paragraph Styles

Block Right style Lorem ipsum dolor sit amet, velit jugis dignissim scisco typicus, feugait abico, vel in. Brevitas persto quidne feugait lucidus this is bold copy premo opes saluto. Vindico interdico ingenium macto hendrerit facilisi os typicus accumsan dignissim velit feugait adipiscing pagus autem. Proprius letalis exerci nisl facilisi, pala this is italic copy. Sit, blandit magna haero hos, pala minim. Enim tincidunt conventio macto abico delenit refoveo si nobis, quibus typicus rusticus. Gravis odio nutus ludus, inhibeo, importunus, nisl tamen nunc gemino, distineo in feugait ex. Accumsan nobis commodo consequat pagus ulciscor dolore.

Dolor nostrud usitas facilisi commoveo paratus ille facilisi autem dolus eligo iaceo augue exputo. Mauris camur paulatim sagaciter defui typicus suscipit. Praesent roto ut multo quibus inhibeo autem, ne nimis torqueo ventosus vicis, nonummy ut.

Block Center styled Then, you are going to see some footnote text style:

Footnote text

General Content Organization Guidelines

The following outlines the best practices for organizing content in the Mount Vernon website. Under no circumstances should you copy and paste content from a word processor or existing internet page directly into the CMS page editor. When content is directly pasted from word processors or an internet page, the copy may retain its existing styling which will make it look different than the rest of the Website.

Sample Content Outlines

Let's go over a simple way to organize your content on the page:

Page header
- Page intro
Section header (Header 2)
- Description paragraph, images, list, or table
  - Subsection (Header 3)
    - Description paragraph, images, list, or table
Section header (Header 2)
- Description paragraph, images, list, or table

The page header is the title to your page. This can be added in the CMS page editor as "Page Header."

The page intro is an optional blurb that can be added in the CMS page editor as "Page Intro." It is inserted between the page header and the rest of the page content.

The page is then broken down into sections, with titles for each of those sections. The titles to these sections are called headings. Headings start with the most general and overarching title, Heading 2 (h2), and go down to the most specific, Heading 4 (h4). Again, there should not be any use of Heading 1 in the page content, but you can have as many of the others as you like. When writing titles and subtitles, keep in mind that they should be a clear and concise summation of the content that follows.

Headings should always follow a clear order. Say, for example, you have a page that is broken into three sections called "The Academic Program," "The People," and "The Place." And "The People" is broken into three subsections called "Students," "Student Honors Earned," and "Faculty." Your page should be organized like this:

h2: The Academic Program
h2: The People
- h3: Students
- h3: Student Honors Earned
- h3: Faculty
h2: The Place

As you'll notice, any subsection that sits under a Heading 2 is a Heading 3. Let's say we add two subsections to each Heading 3 item. The page would then look like this:

h2: The Academic Program
h2: The People
- h3: Students
  - h4: Subsection
  - h4: Subsection
- h3: Student Honors Earned
  - h4: Subsection
  - h4: Subsection
- h3: Faculty
  - h4: Subsection
  - h4: Subsection
h2: The Place

Extended Content Styles

List Styles

Unordered List

This is an unordered list item.
This is a second item.
- This is a second level unordered list item.
- This is a second item.
- This is a third item.
- This is a list item that links to another page.
This is a third item.
This is a list item that links to another page.

Ordered List

This is an ordered list item.
This is a second item.
1. This is a second level ordered list item.
2. This is a second item.
3. This is a third item.
4. This is a list item that links to another page.
This is a third item.
This is a list item that links to another page.

Tabular Data

Data Type	Number	Letter
Data 1	1	A
Data 2	2	B
Data 3	3	C

Button/Link Styles

Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.

Red Button

Bordered Button

Watch The Video

Card Block

This is an In Content Page Callout style called Card Block. Hide on mobile ( Learn More

Color Block

This is an In Content Page Callout called Color Block

Learn More

Lead Sponsor

Details of the sponsorship of the event.

Level 1

Level 2

Level 3

Organization Name 1

Organization Name 2

Organization Name 3

Level 4

Organization Name 1

Organization Name 2

Organization Name 3

Text Block

This is an In Content Page Callout called Text Block

Learn More

September 21, 1776

General Washington retreated across New Jersey and into Pennsylvania

After losing the Battle of Long Island to the British, they were chased until the British were satisfied that the American forces have lost.

George Washington's plan to attack Colonel Rahl at Trenton

The main force under Washington was to enter Trenton from the Northwest. Sullivan was to march around town and attack from the South. The remainder of the troops were supposed to occupy the Northeast.

George Washington Crossing the Delaware

It was a cold dark night and the river was running with flowing ice. At about 11 pm a heavy snow and sleet storm broke. Washington's force did not reach the east bank until around 3 am. Washington's men then marched to Trenton.

Attack of George Washington's army against the Colonel Rahl of the Hessian army

The Hessians attempted to form in the town but were under heavy artillery fire from the front and rear. The Americans occupied the houses and shot down the Hessian gunners and foot soldiers, during which Colonel Rahl was fatally wounded.

Surrender of Colonel Rahl of the Hessian Army

Rahl's troops retreated to an orchard South East of the town, where they surrendered.

For a more detailed explanation on how to use these blocks effectively consult our design partner, Fastspot's blog.

Read the Article

Membership (In Content)

Users can customize the title and subtitle but the rest of the block is fixed.

Learn More

Test

Will it work for us?

Learn More

Full Text Block (Full)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Learn More