...
Description
A This block with a background image or pattern that spans full-width. 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.
Examples
- background photos
-stat layouts
- background photo with parallax
- background photo
Design
Background Image - desktop
| Background Image - mobile
|
|---|
Gray Pattern Background patterns (gray, blue, or red options) - desktop
| Background patterns
Gray Pattern - mobile
|
|---|---|
Red Pattern
| Blue Pattern
|
|
Stat Layout - Big stat/call-out box option blue, gray, or red background patterns blue pattern, angled red pattern
| Mobile
|
|---|
Stat Layout - Angled Gray Pattern- icon, numberIcon option
| Mobile
|
|---|
Video background |
|---|
Poster image
- desktop
|
|---|
Mobile video with option to keep copy on top of video |
|---|
Mobile video with copy below video
|
|---|
Copy Requirements
For background image and background pattern layouts
- Follow MSC's Writing Web Copy best practices
For stat layout
- Statement text: 80 characters or fewer (shorter is better)
- Stat: 52 characters or fewer if stat source is just one line; 22 characters or fewer if stat source is two lines
For video layout
- No copy or as little copy as possible since a video will be playing under it
Needs from Designer
For background image layout
- Need background image
For video layout
- Need video
- Need poster image (a still of the first frame of the video)
Use Cases
Use to showcase a high quality image on a Page or Post.
...