Harvard University homepage
HARVARD.EDU

Landing Page Template Patterns – Backup

Professor Michael Puett is the Walter C. Klein Professor of Chinese History and the Chair of the Committee on the Study of Religion. He teaches in Sanders Hall at Harvard University. Rose Lincoln/Harvard Staff Photographer

Solid Background Colors

Parchment #F3F4F4, use the default text color Ink (#1E1E1E)

Crimson #A51C30, use White (#FFF) as text color

Ink #1E1E1E, use White (#FFF) as text color

Indigo #2B416E, use White (#FFF) as text color

Shade #BAC5C6, use the default text color Ink (#1E1E1E)

Shade #D7D1CB, use the default text color Ink (#1E1E1E)

Bluebonnet #3A56BA, use White (#FFF) as text color

placeholder image

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button
placeholder image

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button

Heading 2 for Image Cards

placeholder 600 x 400 pixel image

Image Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

placeholder 600 x 400 pixel image

Image Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

placeholder 600 x 400 pixel image

Image Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Heading 2 for Icon Cards

Icon Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Icon Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Icon Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

First Last
Name Last Name
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

First Last
Name Last Name
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

First Last
Name Last Name
Title

Pullquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

First Last Name Lastname
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

First Last Name Lastname
Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

First Last Name Lastname
Title

People Cards

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

People Cards

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

People Cards

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

People Cards

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

People Cards

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

People Cards

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

People Cards

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

first last

First Last

Job Title

Department / Group

email@harvard.edu

People List

first last

First Last

Job Title

Department / Group

email@harvard.edu

000-000-0000

Scelerisque turpis eget porttitor nullam quam gravida dictum lorem neque mollis vestibulum enim sit etiam a ullamcorper. Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

first last

First Last

Job Title

Department / Group

email@harvard.edu

000-000-0000

Scelerisque turpis eget porttitor nullam quam gravida dictum lorem neque mollis vestibulum enim sit etiam a ullamcorper. Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Indigo Band

Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Button 1
Button 2

Indigo Band

Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Button 1
Button 2

Crimson Band

Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Button 1
Button 2

Ink Band

Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Button 1
Button 2

Parchment Band

Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Button 1
Button 2

Parchment Band

Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Button 1
Button 2

Parchment Band

Inceptos erat orci odio quis quam dis a sociosqu pharetra lacinia sed fames sagittis aliquam ut suspendisse suspendisse vel varius magnis. A morbi viverra et a posuere egestas velit sed nunc euismod ac turpis sagittis nullam.

Button 1
Button 2

Background image with blue and red gradient

The recommended opacity for this block is 70.

Button

Background image with white cover

The recommended opacity for this block is 80.

Button

News

    Events

    Accordion

    First Accordion

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Second Accordion

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Third Accordion

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    FAQ

    What is FAS?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Who belongs to FAS?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    How do I apply?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    When do classes start?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    What are the most popular programs?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    FAQ

    What is FAS?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Who belongs to FAS?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    How do I apply?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    When do classes start?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    What are the most popular programs?

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Adding an Alert band: Go to the Customizer > Content > Alerts and add the text you want displayed on the banner. Make sure that there is enough contrast between the text and the background color for accessibility reasons.