Components

Here’s your new site’s suite of editable components: select a component to learn more about how and when to use it most effectively.

These components are your strongest and boldest, often used in specific circumstances such as your homepage or on landing pages.

These components use 100% of your grid horizontally and should be used primarily to make a strong impression in cases you don’t need sub-navigation.

These components are paired with WYSIWYG content and provide emphasis higher up on the page.

Main Feature/Brand Statement

See Component Live

This image and language pairing should represent Trinity as a whole and tie closely to top-level brand statements.

Video Card

See Component Live

Video stories are particularly good for places, but can also be individuals talking (like we did for the strategic plan site). Make sure the text description clearly describes the most interesting content that the video contains so that people are compelled to watch.

Academic Major/Program Preview

See Component Live

This list is categorized and managed by the office of communication. Program titles and descriptions are not to be changed by anyone outside that office.

The overarching goal for academic programs should be to convince students that a particular area of study is interesting, that Trinity is the best place to study it, that you can get a great job after you’re done with the program—and then to back those core points up with strong supplemental content.

Testimonial/Story Card

See Component Live

The person or persons are the subject of the story. It’s about who they are and their experience with Trinity. Example: an alumnus recalls their favorite experience at Trinity, a current student talks about getting ready for commencement, a faculty member talks about why they teach.

Academic Program Card

See Component Live

The overarching goal for academic programs should be to convince students that a particular area of study is interesting, that Trinity is the best place to study it, that you can get a great job after you’re done with the program—and then to back those core points up with strong supplemental content.

This preview card should briefly summarize the top differentiators and selling points of its respective program.

Profile (People, Places, Pride) Preview

See Component Live

Trinity stories capture your most compelling people, places, and points of pride in an easily scanned and consumed preview that leads to the full detail on a separate page. These stories are the primary method by which Trinity conveys its identity, and each one should hit upon one or more of the key themes that we identified in our core strategy:

  • The connection that Trinity has to Hartford and other urban environments around the world.
  • Connecting the Trinity of yesterday to the Trinity of tomorrow.
  • Being bold and proud of Trinity accomplishments.

For the homepage, these stories live in one of three areas - people, places, or pride. Each type requires a slightly different approach:

People: The person or persons are the subject of the story. It’s about who they are and their experience with Trinity. Example: an alumnus recalls their favorite experience at Trinity, a current student talks about getting ready for commencement, a faculty member talks about why they teach.

Places: The location is the subject of the story. The narrator can be the institution, but ideally is a real person or people reflecting on why that location is important to them. For example: What’s the significance of The Long Walk?

Pride: The achievement or point of pride is the subject of the story. For institutional achievements like a new program ranking, this should be written in institutional voice. When trying to decide if something is a people or pride story, ask - is this story about the institutional achievement or overarching theme that this represents, or is this a story more specific to an individual or group?

Emergency Alert

See Component Live

Purpose: time-sensitive emergency communication

It goes without saying, but an emergency alert should only be used in the case of an emergency. It takes over the most prominent real estate on the website and becomes the focus for every visitor. If campus is closed due to inclement weather, that’s a good reason for an alert. Anything less impactful should be a news or event item.

Media Gallery

See Component Live

This component creates a parent container that when clicked, exposes a set of media along with captions that the user can browse through. It accepts images and urls to link to videos.

When creating a media gallery, first consider the types and grouping of media that will be added. If they’re all from a single event or range in time, they should be in chronological or reverse-chronological order. If they’re grouped by concept, order them by importance, as media closer to the beginning of the set is more likely to be seen. The parent container title should be representative of the topic or theme that all component items are a part of.

Be sure to follow best practices when naming files, using alt text, and creating transcripts. WCAG 2.0 guidelines require the inclusion of alt text for images and transcripts for videos. When captioning videos, write descriptions that summarize the most compelling things contained within the video - that which will most compel users to hit play.

Important Now

See Component Live

The important now section is intended to highlight resources that are pertinent to the visitor of a particular section at a particular point in time. On the homepage, this is tied to the seasonal enrollment calendar and tailored to prospective students and what they will be thinking about and doing in the coming weeks and months. On internal pages of the website, important now should include services, processes, and associated deadlines that are particularly time-sensitive. For example, the financial aid website could use important now to highlight upcoming deadlines and the services that help people complete what they need to for that deadline.

This component needs to be closely curated. Be sure you have a rotation of relevant content that changes over time—if you find you only have one list and it stays the same content year-round, it should be evergreen page content, not highlighted here.

Story

See Component Live

Trinity stories capture your most compelling people, places, and points of pride in an easily scanned and consumed preview that leads to the full detail on a separate page. These stories are the primary method by which Trinity conveys its identity, and each one should hit upon one or more of the key themes that we identified in our core strategy:

The connection that Trinity has to Hartford and other urban environments around the world. - Connecting the Trinity of yesterday to the Trinity of tomorrow. - Being bold and proud of Trinity accomplishments.

For the homepage, these stories live in one of three areas - people, places, or pride. Each type requires a slightly different approach:

People: The person or persons are the subject of the story. It’s about who they are and their experience with Trinity. Example: an alumnus recalls their favorite experience at Trinity, a current student talks about getting ready for commencement, a faculty member talks about why they teach.

Places: The location is the subject of the story. The narrator can be the institution, but ideally is a real person or people reflecting on why that location is important to them. For example: What’s the significance of The Long Walk?

Pride: The achievement or point of pride is the subject of the story. For institutional achievements like a new program ranking, this should be written in institutional voice. When trying to decide if something is a people or pride story, ask - is this story about the institutional achievement or overarching theme that this represents, or is this a story more specific to an individual or group?

Internal Pages

On internal pages, any story can be pulled in to support the content on that page. Likely inclusions are stories that relate to a specific department or unit. For example: a profile of a faculty member or current student, an announcement of program ranking, or how a particular location furthers its mission or enriches people’s experience.

Using the Story Component on internal pages should always be an intentional decision, one that always comes from a strategic content perspective and approach. It is a curated, specific choice that should enhance the experience of the user.

Content Variants

There are three types of story previews—video, image only, or quote.

Images are the ‘default’ and should be used when video or specific quotes aren’t available. Make sure that the image and the text description are clearly related to one another, and only use a sentence of text to preview the full story.

Videos are particularly good for places, but can also be individuals talking (like we did for the strategic plan site). Make sure the text description clearly describes the most interesting content that the video contains so that people are compelled to watch.

Quotes are best for people profiles and getting their best sound bite out front and center. Make sure the quote is short and sweet (no more than a couple sentences) so it fits nicely in the space, and that the image used contains the person being quoted.

News/Events Preview

See Component Live

There’s only one spot on the homepage for news, and that means that the bar is high for a particular piece of news to be placed here. Only the most important institution-level news that is most relevant to prospective students should be included here. New programs, new initiatives, and other items that reinforce core external messaging (academics, urban involvement, tradition) should be prioritized here.

News Metadata

See Component Live

News items will be sourced from news detail pages and automatically presented in reverse chronological order, and cannot be edited here.

Contact Information

See Component Live

How to use this

how to use it

Testimonial

See Component Live

Testimonials are a great way to tell the Trinity story through the voices of its community. Quotes should be concise statements paired with the name, class year (if applicable) and an image of the person being quoted. Testimonials are supporting content—they are most effective when they are closely related to other page content. When the content is properly aligned the testimonial can drive home a point or idea. For example, if you are writing about internships, quote an internship recipient. Nothing speaks to audiences as much as hearing directly from their peers in their own words.

Facts & Stats

See Component Live

The statistics bar is great for reinforcing the major points on a page with a supplemental statistical or quick points of proof or pride. It’s better to use it in conjunction with other written WYSIWYG content rather than isolated on its own. Read the statistic out loud followed by the text. Lastly, the image here should be something that works well as a background, since most of it will be covered up.

Topic Row

See Component Live

Topic Rows are a flexible component that can serve a few different purposes. Grouped together one after another, they anchor the landing page template as a means to preview sub-sections of the section whose homepage the user is currently on. A sequence of topic rows using numbers can also illustrate a step by step process. Used in isolation, they can also provide a way to laterally connect the content on the current page with content that lives in a different section.

When creating content for topic rows, always consider why the user is on this current page, where they would need to go next, and how those are connected. When using topic rows on the landing page, each topic row should be constrained to just a single topic, each link should correspond to a page that lives within that section or subsection, and each image must make be clearly related to the substance of the subsection.

Pull Quote

See Component Live

Testimonials are a great way to tell the Trinity story through the voices of its community. Quotes should be concise statements paired with the name, class year (if applicable) and an image of the person being quoted. Testimonials are supporting content—they are most effective when they are closely related to other page content. When the content is properly aligned the testimonial can drive home a point or idea. For example, if you are writing about internships, quote an internship recipient. Nothing speaks to audiences as much as hearing directly from their peers in their own words.

Link List

See Component Live

Link lists are used to group related information that lives outside the current page. Use them in place of more visual callouts when you need to quickly share access to more than 1 or 2 destinations. Every link on the list should logically fit with the list title, and every list item title should be self-evident - there’s no room for additional detail here.