Maintenance Notification: WSB Wiki will be offline April 23rd between 8:00am - 10:00am for planned maintenance

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.

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:

  • 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?
  • 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 around stat? 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.


  • Text Color*
  • 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

  • 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. 

Configuration

  • Anchor ID
    • Add an ID to target the block in an anchor/jump link.

Additional Notes

full-width-quote

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/