Rochester Core
Explore documentation around Rochester Core’s Card Grid component.
After selecting the Card Grid component on any page that uses the Rochester Core plugin, you’ll be presented with the following options to customize the display and enter content.
Card settings
The title field is where to add the title or the heading for the entire card grid. Keep in mind title for specific card will be added later. For any supporting text, use the Description Text field below. Styling the title as an H2 is recommend.
The “description” field is where to add description text for the card grid. This should generally be to add context or more information about the card grid. Styling the description as a Paragraph is recommend.
The Card Grid CTA is where to add a call-to-action (CTA) that displays at the bottom of the card grid, below all of the cards. Choosing “select link” will bring up the url options.
The background color selector is where to choose the background color of the entire card component. Choosing the color of the specific cards is found later in the component.
“Card Grid Width” controls how wide the grid of cards is going to be.
Adding cards
Once the settings are in place, it’s time to create the cards to fill the grid. To create the first card choose the “add” button. This will add the card with all of the fields to fill out.
Each card has its own option for how wide the card will be. These are designed to keep the card grid flexible and customizable. The sizes are as follows:
It’s recommended that each row should be designed to completely fill out the row. Ex. if there are three cards in a row the One-third should be used etc.
Enter a brief overline text that appears above the card title. Use this for labels or categorization.
The title of the specific card should be added into the “card title” field. This text can be formatted but will atomically be set to bold. Proper heading hierarchy’s should be used and the “Card Title” format should be used in these cases to keep the card titles to scale.
The main content of the card should be added in the “card text” field. The text can be styled using the provided styling options.
Choose to either add an image or an icon to the card.
To add an image click “add image.” The recommended dimensions for image are 1,230px by 820px (3:2) with a centered focal point.
Card image size: select which size the card images should be displayed as; Thumbnail, Small, or Large.
Image placement: Choose where the image will be positioned on the card to best fit your content layout; above or below.
An icon can easily be added to the display on the card using the Icon setting. Selecting this option will bring up the “Card Icon” drop down menu. Clicking this will bring up a search box to search for an icon to use. Simply selected the desired icon.
An additional color selection field will also appear called “card icon color.” This allows the color of the icon to be customized.
The “card background color” provides the color choice for the cards background. It’s important to make sure that the cards color is different from the background color selected so the cards are visible.
The “card hover color” refers to what color the card will change to when a mouse is hovered over it. This should only be used if the intention is to make the card a clickable link. If the card won’t have a link, match the card hover color to the background color. If the card is going to have a link, the blue is a great color option for this. In fact, this shade of blue was specifically chosen and named “interactive blue” to show users that this is something they can interact with.
To make a card clickable as a link, click the “select link” button. This brings up a pop-up box with the options to add a URL. A custom link can be added into the URL field. The search field can also be utilized to search the site for any already existing pages for easy linking.
Choose how to display the cards call-to-action.
This is an example Card Grid in a single column with photos alternating sides. The links are styled using the Card CTA styling option.
Our vision drives our strategy
As the University’s central marketing and communications office, our integrated team works to raise awareness about the University and strengthen Rochester’s reputation as one of the world’s leading academic and research institutions.
About our office
Leaders in our craft
Our audience-focused approach supports and aligns with University priorities and strategic goals. Areas of expertise include news and social media, institutional communications, brand and digital strategy, multimedia and design, thought leadership, marketing, and media relations.
Explore our work
Below is an example of a card grid featuring a three-column layout. Each card contains a title, text, image, and has the card wrapping link enabled with the card arrow turned on.
Research
Students and faculty are using cutting-edge technology to tackle the world’s most pressing challenges.
Admissions
Find more information on how to apply to our undergraduate and graduate programs, financial aid, and more.
Visit us
See the place we call home. Sign up for a tour of the University of Rochester’s campuses.
Below is an example of a card grid featuring a three-column layout. Each card contains a title and text. The hover has been turned off because there is no hyperlink attached to the card.
University News
From @Rochester to Rochester Review, we spread the word about important news and events on our campuses–and about the University’s impact around the world.
Creative and brand strategy
We are brand stewards who create strategic materials for the University, like logos, templates, campus signage, and more.
Digital strategy and services
We oversee and support many of the University’s central websites–the front door to our “digital campus”.