Also known as: stat callout, background photo, full-width photo, animated stat, full-width pattern, background video, full-width video
Description
Displays a high-quality, full-width asset (photo, video, or background pattern) to capture the user’s attention. A small amount of overlaid text provides essential context, a quote, or a key message.
Design
Background Image - desktop
Mobile
Background patterns (gray, blue, or red) - Desktop
Mobile
Stat Layout - Big stat/call-out box option
(blue, gray, or red background patterns)
Mobile
Stat Layout - Icon option
Mobile
Video background - desktop
Mobile video with copy on top of video
Mobile video with copy below video
Use When
Use to capture user attention with a bold claim or a high quality image or video. Works well on high level Pages, Newsroom Posts, and Update Magazine posts.
Background photo option: used with a high quality photo to make an impact and add interest to a page; often used with an environmental portrait photo and a quote.
Background pattern option: used to highlight important information.
Full-width stat option: used to call attention to a quick stat.
Background video option: use sparingly as too much motion on a page can be an unpleasant user experience. B-roll style video only.
Avoid using multiple heading and text styles in the text content. Stick to 1-2 types of content (e.g. heading and supporting copy, quote and author)
For stat layout
Stat number: Only a few characters, such as a number "449", a percentage "98%", or a ranking "#9".
Stat text (the larger, bolder text that provides context to the stat number): 52 characters or fewer. Keep it as short as possible. Example: "of students agree their next steps align with their career goals" provides context to the stat "98%".
Source text:
Generally 20 characters or fewer, e.g. "Class of 2025".
Long source text option: Can provide more context and go up to ~80 characters for a long source. Example: "— Carnegie, 2024 R1 universities are top-tier research institutions."
Do not use stat text (or use max of 10 character stat text) if have long source text.
Statement text: 80 characters or fewer. Shorter is better.
Note for dev: The field for the statement text is "Title".
For video layout
As little copy as possible since a video will be playing under it. It is difficult to read text on top of motion. If copy, follow MSC's Web Copy General Guidelines.
Design Assets Needed
For background photo option
Not all photos will work. The photo shouldn't be too busy and avoid using a photo of multiple people as they could get covered by the copy or cropped out. If not using a card to hold copy, make sure the photo will allow proper contrast with the text on top of it. May have to put a dark gradient over photo so that copy is properly contrasted (Example: Bob Batt photo on OIM page has dark gradient on left so white text is properly contrasted.)
Required photo asset
1 high quality photo (taken by WSB photographer or other professional).
Specs
At least 2400px wide.
The subject should be vertically centered in the image to avoid important features getting cropped out.
If using an environmental portrait, the subject should be horizontally on the right or the left to accommodate copy on the other side.
For background video option
The content in the video should be subtle, background style or "B-roll" footage.
Required video assets
1 mobile video
1 desktop video
1 poster image (a still of the first frame of the video or a photo very close to the first frame of the video)
Specs
The ideal video file size is 5MB or less for both desktop and mobile. Optimize the video as much as possible to help keep the file size down as much as possible.
Mobile video must be 5MB or less.
Remove the audio from the video (removing the audio from the video file will also help keep the file size low).
Ideal resolution is 1920x1080 (Full HD) for desktop and 1280x720 (HD) for mobile video.
Ideal format - mp4
Aspect ratio is 16:9
Ideal video length is around 6-7 seconds. It will play in a loop. Note that the higher the quality of the video, the shorter the video length will need to be.
Styles
Font-styes for quote on photo background:
Implementation
ACF Fields:
Choose Photo or one of the Pattern options. Do not use photo with Stat Layout.
For Photo type:
Background image
Make sure the image is high-quality and at least 2400px wide.
The subject should be vertically centered in the image to avoid important features getting cropped out. You may need to request a different crop of the image from a designer.
The content will display on top of the image for desktop and tablet screens, but will drop below the image for mobile. (see screenshots above)
Display a different image for mobile? Toggle to Yes if you want to select a different image to display for mobile screens
See example of a full-width background block that displays a different image on mobile.
Hide image for mobile? Toggle to Yes if you prefer to hide the image for mobile
See example of a full-width background block that hides the image on mobile.
For Pattern types:
Choose between a Gray, Blue or Red background.
The content will display on top of the pattern for all screen sizes. (see screenshots above)
For Video type:
Video should be short, 16:9 video, and center the most important content.
Ideally, the video should be around 6-8 seconds.
Pause/Play button on the right bottom of the component
Poster image
Make sure the image is high-quality and at least 2400px wide.
See Background image for Photo type for more information.
Add parallax effect?
Creates a special type of scrolling effect, where the background image moves slower than the foreground objects.
Note: This effect will not work for video, so it's hidden when video type is selected.
Stat Layout
Changes the fields to support a ranking/statistic layout
Text Content (Non-stat layout)
Title
Add your text
Conditional fields:
Title heading size – select the desired heading size (h2, h3, h4, h5)
Subtitle – add your text; this heading level will automatically be set to the title heading size +1
Link
Add a link and button copy
The button style will either be .btn-outline-light or .btn-outline-dark, depending on the background pattern or text color chosen.
Note: If you also add Custom Content in the next field, this button will appear below that content.
Custom Content
A WYSIWYG field for adding paragraph text or other custom content
Keep copy short, up to 50 words
This content will be placed in a <div> with the "lead" class. This class will only affect paragraph elements (it will make the font size larger to ensure content is legible)
Note: Be sure to use semantic HTML tags around all content
Text Content (Stat layout)
Title
Add your text.
You can add <b> </b> tags around the portion of the title you'd like bolded, and it will style automatically.
Conditional fields:
Title heading size – select the desired heading size (h2, h3, h4, h5)
No subtitle.
Link
Add a link and button copy
The button style will either be .btn-outline-light or .btn-outline-dark, depending on the background pattern or text color chosen.
Stat Layout specific items:
Stat Alignment: Left/Right. Where the stat sits relative to the heading
Add card aroundstat? Adds traditional card styling around the ranking/stat
Icon Image: displays a 150px wide image that shows above the stat information. Use a transparent png or svg. Optional, but if you use it the ranking number will display smaller.
Number Prefix: Dropdown with same choices as rankings block, plus the + sign. Displays using font awesome solid, at 3rem.
Statistic: The number for the stat. Displays at 4.5rem Acumin Pro Black on all screen sizes. Do not use long numbers or words, since it's so massive (use the Bolded stat text field instead).
Number Suffix: Dropdown with same choices as rankings block. Displays using font awesome solid, at 3rem.
The copy will remain on the photo/video on smaller screen sizes
Animation: add text fade-in?
This animation is triggered when the user scrolls to the block on the page. The heading moves in from the left or right on desktop (whichever side the heading is on), or from the bottom on mobile. The ranking number (or icon image, if there is one) zooms in.
Note: This effect is minimized for users who have turned on an OS setting to reduce motion. The fade-in effect occurs with no movement.
