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.
| Expand | ||||
|---|---|---|---|---|
| ||||
|
Design
Design
...
Background Image - desktop
| MobileBackground Image - mobile
|
|---|
Gray Pattern - desktop
| Gray Pattern - mobile
|
|---|
...
Red Pattern
...
Blue Pattern
...
Stat Layout- blue pattern, angled red pattern
...
Mobile
...
Stat Layout- Angled Gray Pattern- icon, number
...
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.
Examples:
- Companies & Recruiters page
- background photos
- stat layouts
- Update Magazine article
- background photo with parallax
- Home page - Madison section
- background photo
- Sample block page - Private page, must be logged into WordPress
- many examples
Editorial Guidelines
For background image and background pattern layouts
- Follow MSC's Web Copy General Guidelines.
- 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:
Use Cases
Use to showcase a high quality image on a Page or Post.
Use in a featured/high profile News post.
Use in Update magazine posts.
...
- 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.
- Background image
- 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.
- For Photo type:
- Add parallax effect?
- Creates a special type of scrolling effect, where the background image moves slower than the foreground objects.
- Note: This effect is removed for users who have turned on an OS setting to reduce motion. Learn more about reduced motion and accessibility.
- 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 Color*
- Options: Default colors, Black, White
- Be sure to choose a color that meets color contrast standards.
- Horizontal Placement
- Options: Left, Center, Right
- Vertical Alignment*
- Options: Center, Bottom
- Add transparent background?*
- If the background photo has a lot of color variation, add a transparent background behind the text to ensure all of it is legible.
- Stretch link?
- Options: Yes or No;
- Toggle to yes if you want all text in the block to be clickable; this field only appears if you have added a link
- Animation: add text fade-in?
- This animation is triggered when the user scrolls to the block on the page. The content fades in and moves up slightly.
- Note: This effect is minimized for users who have turned on an OS setting to reduce motion. The fade-in effect occurs with no vertical movement.
- Keep copy on image on mobile?
- Works for photo and video type
- The copy will remain on the photo/video on smaller screen sizes
...
Add the full width quote class to a paragraph if you want the styling of a large quote. <p class="full-width-quote"></p>
Resources
Full-width Block examples/test page - https://business.wisc.edu/sample-blocks/full-width-background/