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. 

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.
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. 

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><a class="btn-purple" href="#">Text </a></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
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).

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.