Also known as: photo card, card with shadow, white card, icon card, filterable cards
Description
A standard white card with an outline and shadow that can display a subheading and a small amount of copy. Optional features include a photo or icon and a link.
Design
Example 1 - Cards with photos and linked subheadings
Small text displayed above the card title that provides a bit of context
Not used often in this block
Example: PMBA Culture and Community – "For Women" and "For Active Duty, Reserve Duty, and Veterans" text in Student Support cards
Card title/Subheading (recommended)
Keep each subhead limited to one short phrase
Character limits:
1-3-column layout → ~45 characters max
4-column layout → 25 characters max
Keep all subheads in the same row similar in length
Subtitle (optional)
Not used often in this block, since card copy should remain short enough that a subtitle isn't necessary
Supporting copy (recommended)
Keep this copy short; one or two short phrases for each topic.
Character limit: ~125 characters max
Keep in mind that if your card titles vary in length, we may need to adjust the length of supporting copy to maintain a consistent content height across the card row
E.g. for cards with longer titles, we may need to shorten the supporting copy.
If possible, organize content into bulleted lists to make it more scannable.
Include 2-3 list items of similar/equal length in each card
~65 characters max for each list item
Keep all card supporting copy in the same row similar in length and structure (e.g. if you include a bulleted list in one card, the other cards in its row should have similar lists)
Link (optional)
Provide URL and desired link text
If the link text essentially repeats the card title, the button can be hidden and we can link the card heading instead
Example: Graduate Programs – program cards under "View All Graduate Programs"
Design Assets Needed
Cards can display either a photo or an icon
Be consistent with cards in the same row or grid. If one card has a photo, they all need to have a photo. If one card has an icon, they all need one.
Card photo (optional)
Standard horizontal photo; use a portrait or environmental shot
Dimensions: 2400x1600px
jpeg file
We can change the aspect ratio for card photos. The aspect ratio will be the same for all photos in the same card grid.
Options:
21x9 (can be used if the images are appearing too large/tall in the default ratio)
16x9 (default)
4x3 (not used often)
1x1 (not used often)
Icon (optional)
Icons will be centered in the card and a small horizontal gray bar will display below the icon
Share the file name for the icon and the developer will look for your desired icon in the WP media library icon folder, if it has been used on the web previously.
If the icon is new or the developer cannot find it in the media library, you will need to provide an svg file. The file can be saved to the MSC Web Google Drive, in the Icons folder
Implementation
ACF Fields
You can manually select a post from the dropdown. Since the dropdown pulls all posts, you can type the title of a post to filter through them.
Note: When pulling a post, a CTA is automatically created. The CTA text is "Read full article", with an aria-label on the link that says "Read full article: {Article Title]"
Check the "Stretch Link" and "Remove CTA" checkboxes in Configuration for better accessibility/less redundancy when using Populate From Post.
Title
Add the title of the card.
Note: The size of the heading depends on the Title Heading Size under Introduction. For example, if Title Heading Size is h2, the card title will be h3.
Note: If you check "Remove CTA" in the Configuration, you must have something in this field for the link to work.
Subtitle
You can add a subtitle to the card. It will be displayed below the card title.
Filter Names (hidden)
Text field that's revealed if "Add Filters?" in Configuration is checked
Content of this field is not displayed anywhere- it is in the data of the card's html element.
Add the list of filters, separated by commas, you want the card to be included in.
These filter names must be ones already listed in "All Filter Names" in Configuration.
All cards are automatically included in "View all", so you don't need to include that one.
There's no minimum or maximum number of filters per card, but you'll probably want there to be at least one filter per card.
Image
You can add an image from the Media Library to the card.
Microtitle
You can add a microtitle to the card. This microtitle is displayed above the card title.
Content
Add the supporting copy for the card.
Link
Add the URL and link text for the card's CTA.
CTA Style
Select the CTA style for the card. Default style is primary (red) button
Recommend choosing text link or red outline style, especially if you have 3 or more cards
We typically choose the same CTA style for all cards in a block, but there are times this rule can be broken (e.g. if there are two cards and one has a more important CTA, like "Apply now", make that one a primary button and the other one a red outline button)
Intro fields
Standard block introduction heading and intro copy fields.
Footer fields
Standard block footer fields – footnote and CTAs/links.
Configuration fields
These fields are at the block level, meaning they affect all cards in a single instance of the component
You can adjust the aspect ratio of the image. Default ratio is 16x9.
Icon
This option should be selected when an svg icon is added to the image field of the card
This will style the icon so that it is centered vertically and horizontally in the top of the card
It also adds a subtle gray accent line (or <hr>) below the icon
Note: do not mix icons and photos in cards within the same block; cards within the same group should all have icons, or photos, no images at all
Stretch Link
Check to add hover effect to the card and make whole card clickable.
Only use on cards that contain one CTA
Remove CTA
Check to hide CTA from the bottom, linking the header/title content instead
Enable Card Shadows
Adds shadow around cards
Default = checked
Add Filters
Check to add interactive filters to the cards. When checked:
Reveals additional fields:
All Filter Names (under Configuration)
Filter Names (on each card)
Adds filter buttons/badges below the Introduction and above the cards.
Automatically adds "View all" button, and any filter buttons listed in "All Filter Names"
All Filter Names (hidden)
Text field that's revealed if "Add Filters?" is checked
Add the names of the filters, in order as you want them to be displayed (case sensitive), separated by commas
Special characters/numbers are okay but each name must start with a letter.
The "View all" filter is added automatically as the first button and cannot be edited.
Filter Names (hidden – on each individual card)
Go back to each card and add the matching filter name(s) to this revealed field.
If done correctly, each card should appear when the correct filter(s) is/are applied. Be sure to test thoroughly as any typos will break the functionality.
