Also known as: stat callout, background photo, full-width photo, animated stat, full-width pattern

Description

This block displays a high-quality, full-width image (photo, video, or background pattern) that captures the user’s attention while setting the visual tone of the page. A small amount of overlaid text provides essential context or a key message. The text could be a quote or a short sentence. Avoid using multiple heading and text styles in the text content.

Design

Use Cases

Used to showcase a high quality image and capture user attention. Works well on high level Pages, Newsroom Posts, and Update Magazine posts.

• Background photo option: often used with an environmental portrait photo and a quote from the person in the portrait.
• Background pattern option: used to call attention to a quick fact, or 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

Copy Requirements

For background image and background pattern layouts

• Follow MSC's Web Copy General Guidelines & Requirements.

For stat layout

• Stat number: A few characters max, such as a number "449", 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 & Requirements.

Design Assets Needed

For background photo option

• Need background image

For background video option

The content in the video should be subtle, background style or "B-roll" footage.

Assets needed

• 1 mobile video
• 1 desktop video
• 1 poster image (a still of 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. 

Fields

Background Content

Background Type (required)

• 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.
    • See example with a background photo.
  • 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 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.

• Bolded Stat Text: The slightly larger, bold text for the statistic. Use this if you want words to be emphasized a little more. Has the same styling as the ranking numbers if there is an icon image. Font weight 700, font size 2rem.

• Normal Stat Text: Normal stat text. Font size 28px. Font weight 600 (semibold). 

• Source: Ordinary paragraph text, centered. Does not include mdash.

Text Content Styles (Non-stat layout)

Note: Styles with an asterisk (*) are only available for the photo background type.

• 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. 
    • Learn more about reduced motion and accessibility.
• Keep copy on image on mobile?
  • Works for photo and video type
  • The copy will remain on the photo/video on smaller screen sizes

Text Content Styles (Non-stat layout)

• 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. 
    • Learn more about reduced motion and accessibility.

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>