Sample Components - Basic Page

Intro text provides an overview of the information on the page. Spec: 1-3 sentences max. It only appears at the top of the page. 

Fenwick Hall framed by Kimball Hall's columns

Hero Image

Hero images appear at the top of a page, like the one of Fenwick Hall on this page. They should be no smaller than 768x217px. The image should enhance the content on the page. No graphics, text or icons. 

Banner Images

Banner images appear at the very top of pages within a group. The same image appears on all pages within that group and should be sized 1122x242. They can be managed in the group itself.

Body Copy

This is normal body copy. Body copy should follow intro copy. This is a hyperlink. Never say click here. 

Body copy should be broken up into multiple paragraphs, 2-3 sentences per paragraph.  

This is bolded copy.

This is italicized copy.

Headings

Use H2, followed by H3, followed by H4, followed by H5. Ensure proper hierarchy. 

Heading 2

Heading 3

Heading 4

Heading 5

Blockquote

This is a blockquote. A blockquote is used to differentiate a section of quoted text from the text around it. A blockquote may be a sentence, a paragraph, or many paragraphs, but it is always considered part of the text — not a duplicated phrase or quotation.

Table

A table is a visual way of presenting data and/or information.

Table caption
Column 1 Column 2
Row 1 data Test data 1
Row 2 data Test data 2

Bulleted List 

  • Bulleted list item 1
  • Bulleted list item 2
  • Bulleted list item 3

Numbered List

  1. Numbered list item 1
  2. Numbered list item 2
  3. Numbered list item 3

Headshots

Tricia Chuplis

Professional headshots of faculty, staff, students, etc., should be cropped 200x267 px. 

 

 

 

 

 

dinand library on a spring day
Eyebrow
Title - Left

Body field. This is a full HTML field. 

  • Bulleted list
  1. Numbered list.
Learn about Holy cross
Image
Eyebrow
Title - Right

Full HTML body field. 

Quisque eget aliquet nisl, ut mattis ex. Aliquam eros lorem, feugiat eu magna vel, vehicula dapibus quam. Vestibulum eget ipsum mattis, vestibulum ligula et, luctus leo. Quisque elit urna, cursus eu consectetur at, sodales sit amet augue. Ut sagittis, ante quis accumsan aliquam, sem dui volutpat augue, ut pretium nunc leo eget eros. 

Learn more about Holy Cross

Body 1 - Full HTML. Bolded text.

Heading 2

Campus scenic image. Photo by Avanell Chang
  • Bulleted item 1
  • Bulleted item 2
  1. Numbered item 1
  2. Numbered item 2

Heading 3

Body text after a heading.

 

Body  2 - Full HTML.

Button Code

<div><p><span class="align-center"><a class="btn-purple" href="#">Text </a></span></p></div>

For pages on holycross.edu, use the relative link (e.g., /admission-aid/visit). For all other pages, use the absolute (full) URL. 

Purple Button

Photo Gallery

Photo galleries are a popular way of integrating many images into a webpage. Professional and high res photos should be used and be at least 1000x600px. 

Fall at Holy Cross
  • O'Kane Hall during fall
  • aerial view of Fenwick Hall during fall
  • two students walking in Kimball Quad during fall
  • fall foliage in front of Carlin Hall
  • O'Kane Hall during fall
  • aerial view of Fenwick Hall during fall
  • two students walking in Kimball Quad during fall
  • fall foliage in front of Carlin Hall
A Slice of Campus Life
crispy chicken salad
Dining

When you’ve studied yourself into a big appetite, you won’t have to worry about what’s for dinner. With nine campus eateries, there’s a bevy of nutritious choices to fuel your day (and your cram sessions).

Dining
Figge Hall
Residence Life and Housing

There’s a good reason that more than 90% of our students take advantage of living on campus. Perfect for rest, studying and getting to know your neighbors, our residence halls are a comfy home away from home.

Residence Life and Housing
A Slice of Campus Life
crispy chicken salad
Dining

When you’ve studied yourself into a big appetite, you won’t have to worry about what’s for dinner. With nine campus eateries, there’s a bevy of nutritious choices to fuel your day (and your cram sessions).

Dining
Figge Hall
Residence Life and Housing

There’s a good reason that more than 90% of our students take advantage of living on campus. Perfect for rest, studying and getting to know your neighbors, our residence halls are a comfy home away from home.

Residence Life and Housing
students lounging and doing work in the lobby area of Figge Hall
Residence Life and Housing

There’s a good reason that more than 90% of our students take advantage of living on campus. Perfect for rest, studying and getting to know your neighbors, our residence halls are a comfy home away from home.

Residence Life and Housing

Events Listing

The following are how events can be styled according to the amount of content available. One formatted component should be used per event to maintain consistency. Images should be sized 200 x 267 px (like headshots). Events should be listed in reverse chronological order.

January 28, 2023 | 6 pm | Hart Center
Women’s Basketball Jersey Retirement Ceremony

Join the College community in honoring and celebrating the incredible accomplishment of five alumnae of the Holy Cross women's basketball program. The ceremony will take place during the Crusaders' contest against Army.
Learn more

February, 23 2023 | 4 pm | Mary Chapel
Raising Our Voices in the Church: Natalia Imperatori-Lee, Ph.D.

Photo of Dr. Imeratori-Lee the speaker for this event. She has short brown hair with reddish highlights, glasses and a black turtleneck with a statement necklace.

Dr. Imeratori-Lee is the chair of the religious studies department at Manhattan College. Her research interests focus on Catholic ecclesiology, in particular the intersection of ecclesial identity with feminist and Latinx Catholic thought. She is also interested in the relationship between Catholic theology, sexuality, and education; the intersection of Mariology and ecclesiology; intercultural theology; gender studies; and the relationship of women, the poor and other marginalized groups to church structure and governance.

 March 16, 2023 | 7:30 pm | In-person and via Youtube live
Rear Admiral Nancy S. Lacore ‘90: My Path to Service and Leadership

As the first female graduate of the Holy Cross NROTC unit to achieve the rank of Rear Admiral Lacore will share highlights from her journey beginning on Mount Saint James.

More info to be shared soon.

 

 

Here is some eyebrow text (this is optional)

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text

Here is some eyebrow text (this is optional)

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text

Here is some eyebrow text (this is optional)

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is title text (this is also optional)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text
An image of a production by the Hanover Theatre
Here is some optional eyebrow text
And an optional title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text
An image of a production by the Hanover Theatre
Here is some optional eyebrow text
And an optional title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Here is some link text

Here is an optional title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Some link text

Optional Title

Optional body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Statistic support text goes here
5

Optional Title

Optional body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Statistic support text goes here
5
Some support text describing the stat
25%

Optional Title

Optional body copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit dui at condimentum posuere. Curabitur in nisi ut arcu ultricies elementum eget in mi. Etiam varius accumsan ligula, lobortis elementum turpis imperdiet eget. Ut consequat dapibus cursus. Sed at consectetur ipsum, in dapibus nibh.

Statistic support text goes here
5
Some support text describing the stat
25%
Average savings for this thing
$100