Media Stack
Developed for the FORWARD campaign, the Image Stack is an interactive component used to layer images or video media.
Dos
Use high-quality images and video
Use between 5-6 images for optimum results
Use texture, motion blur images along with normal photos, and use these photos for the image slots that animate out of view more quickly
Don'ts
Don't use captions or photo credits
Don't use low-quality images and video
Don't use too few or too many media slots
Variations
- This component is built to allow a video feature as a main slot, which expands to take over as a user scrolls. All other media slots should be still images.
Accessibility
Responsive
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow
Image
Provide effective alt text of the image that is concise and relevant. Avoid phrases like “image of” since screen readers often already announce the type of element. WCAG 1.1: Text Alternatives
- Do not use an image to present text. True text should be used whenever possible, as it supports translation, is searchable, and is easier to maintain and customize. WCAG 1.4.5: Images of Text
Video
If you are using a video, ensure that it does not flash more than 3 times per second. Avoid large, flashing images that are bright with significant contrast between flashes. WCAG 2.3: Seizures and Physical Reactions
Content
Recommended image dimensions
Image/Video
1640px × 1090px*
*Recommended minimum size. Aspect ratio depends on screen size
Layout
Animation
- Animation maps to scroll - images spread out and expand as user scrolls.
- Full screen expand animation can be disabled with data-image-expand="false". In this case, media spread will occur, but not the full-screen takeover.
Guidelines
Component takes between 4 and 8 images, but the recommendation is 5-6
