Office of Marketing and Communications

Office of Marketing and Communications

Components Library

Hero Components

Hero components help you to capture your audience's attention and allow you to communicate your message visually by placing a large splashy image at the top of your webpage. The Hero image is accompanied by supporting titles and text depending on which version of the component you choose.

 

Landing Page Hero

Four students walking through a paved plaza on Hawk Hill campus https://www.sju.edu/campus-life

 

Homepage Hero

An aerial photo of Saint Joseph's University Hawk Hill campus with the text Undergraduate Admission beside it https://www.sju.edu/admission/undergraduate

 

Go Landing Hero

Saint Josephs students on their way to and from class walk through a tunnel that connects parts of Hawk Hill campus https://www.sju.edu/leadership-vision/campus-master-plan/pedestrian-underpass

 

Mini Site Hero

Three students walk through the gothic archways outside of Barbelin Hall https://www.sju.edu/dei

 

Landing Page Sub Hero

Visit Us https://www.sju.edu/visit-us

 

Video Hero

An aerial photo of Saint Joseph's University Hawk Hill campus complete with green athletic fields, large academic buildings, and gothic Barbelin Hall with the phrase A Pivotal Moment emblazoned in the foreground https://www.sju.edu/soar

Content Components

Enhance the appearance of your information by including Content components. These designs give you a way to organize content, pair it with images or links, and make the material stand out.

 

Accordions

Answers to Frequently Asked Questions regarding the Saint Joseph's University mailroom https://www.sju.edu/offices/admin-services/mail-services

 

Chapters

Information about the use and stewardship of Saint Joseph's University branding https://www.sju.edu/resources/brand/working-brand

 

WYSIWYG (What You See Is What You Get)

Text explaining the unique academic experience Saint Joseph's University provides students https://www.sju.edu/academics

 

WYSIWYG With Link

Text explaining how you can learn more about Saint Joseph's University campus https://www.sju.edu/faculty-staff#saint-josephs-university

 

Full Width CTA

The rallying cry of Saint Joseph's University is The Hawk Will Never Die https://www.sju.edu/athletics

 

50-50 Split WYSIWYG

Information for applying to Saint Joseph's University as an Undergraduate or Transfer student https://www.sju.edu/apply

 

50-50 Split CTA

Information on how Saint Joseph's alumni can get received discounts on future degrees https://www.sju.edu/alumni

Linking Components

Help users quickly find what they're looking for or call their attention to one specific webpage with a Linking component. These tools can assist in organizing complicated areas of your website or point your audience towards a next step in their user journey.

 

Link List

A list of website links to help prospective students find out more information about Saint Joseph's University https://www.sju.edu/prospective-students

 

Text Block + Link List

A list of frequently asked questions from the parents and families of students https://www.sju.edu/parents-families

 

Study Level Buttons

A list of webpages for students who want to explore different levels of academic programs at Saint Joseph's University https://www.sju.edu/academics

 

Give Bar

A message encouraging visitors to submit an application to Saint Joseph's University https://www.sju.edu/admission/undergraduate

Callout Components

Highlight important facts, figures and faces by using a Callout component. This set of designs can help you emphasize crucial details for your audience and will allow you to provide context around the initiative or program your webpage promotes.

 

Column Width Stats

Facts and figures about the success of Saint Joseph's students https://www.sju.edu/outcomes

 

Quote and CTA

A quotation about the value of research at Saint Joseph's University https://www.sju.edu/research

 

Three Across Quote Feature

Three quotes from Saint Joseph's students about their enjoyment of the academic programs at the university https://www.sju.edu/outcomes

 

Three Across Manual Cards

Three news stories related to the Saint Joseph's University Esports program https://www.sju.edu/esports

 

Three Across Two Mode Cards

A list of three unique benefits afforded to alumni of Saint Joseph's University https://www.sju.edu/alumni/connect

 

Teaser Blocks

A listing of two schools, College of Arts and Sciences and the Haub School of Business, that make up part of Saint Joseph's University https://www.sju.edu/academics

Image Components

Image components give you the ability to showcase photos and other visuals alongside your webpage copy.

 

Spotlight Carousel

A group of children do an exercise on a green field as part of an activity with the Kinney Center at Saint Joseph's University https://www.sju.edu/academics

 

Split Screen Feature

Two Saint Joseph's University students working at a mock pharmacy, one student holds a prescription container https://www.sju.edu/school-health-professions

 

Slide Show

A rendering of two men wandering a white-walled gallery space in the Maguire Art Museum admiring paintings on the wall https://www.sju.edu/maguire-art-museum

 

Full Width Image

Snow falls around the university campus, the statue of Saint Joseph is covered in snow and wearing a red wool hat https://www.sju.edu/faculty-staff

News & Event Components

Promote exciting stories or upcoming events using a News & Event component. You can feed a variety of related news stories or calendar listings to your webpage through these designs.

 

Story / Event Listing

Two researchers in white coats looking at a sample in a laboratory https://www.sju.edu/academics

 

Mini Site News

Listing of recent news and events for Saint Joseph's University https://www.sju.edu/school-education-human-development

 

Events Listing Component

Listing of events offered by the Career Center at Saint Joseph's University https://www.sju.edu/offices/student-life/careers