Also known as: video swiper, card swiper, social videos
A multi-purpose block that displays multiple cards/panels in a swiper. Can showcase videos, text, and/or images.
Examples
Documentation updates in progress
Use When
- Start bullets with gerunds for consistency; the bullet should complete the phrase starting with "Use when..."
- Example: "Displaying a small amount of copy with a photo"
- (optional) Include a “Do Not Use When” subhead when needed
Editorial Guidelines
- Character limits for each feature with copy
- Notes about copy fields that should or should not be used together
- Tips for writing these guidelines
- Use bulleted lists
- Use affirmative language
- Limit to two sentences or less
- Edit and use fewer words!
Design
Images
Photo A (required/optional)
- Dimensions:
- Other details to note (e.g. keep faces vertically centered)
Photo B (required/optional)
Variations
- Show additional variations of the block that are not in Examples above (more screenshots showing additional features)
- Should be an orderly progression, not an attempt to show every possible combination
Implementation
ACF Fields
Other technical details we include in existing docs
Resources
Design
- A flexible block that displays multiple cards/panels in a swiper.
- The block displays swiper arrows and creates swiping functionality when the content requires them. (move to implementation)
- There is also an option to display navigation badges above the cards.
- Currently, this block can display text with an optional image or a video with optional text.
- Click and drag swiping is disabled for video content on desktop. (move to implementation
Text content and one column layout with badges 
| Text content and two column layout 
|
|---|
Video content with badges and supporting text 
| Video content with badges and no supporting text 
|
|---|
Social video (video content + mobile video) 
| Text/image content with icons (top - icons centered, bottom - icons not centered) 
|
|---|
Text/image content with photos 
| Overflow images with modal videos 
|
|---|
Use Cases
Use Case 1
Use the text/image content option to display multiple html tables in a swiper. Example: https://business.wisc.edu/undergraduate/careers/#data
Use Case 2
Use the text/image content option to display multiple cards (with or without images) in a single row with the swiper. Example: https://business.wisc.edu/undergraduate/careers/#resources
Use Case 3
Use the video content option to display multiple videos in a swiper, with or without supporting copy for each video.
Use Case 4
Use the video content + mobile video option to display multiple youtube shorts. Example: https://business.wisc.edu/undergraduate/careers#badger-experience
Fields
Content type
- First you will need to select the type of content from two options: text/image or video
- This block has many conditional fields that depend on the content type chosen
Display badges?
- Yes or no
- Only works with a 1 column layout with more than one card
Mobile layout for badges
- Dropdown (default) or stacked
- Only choose stacked when you have 7 or fewer cards and the stacked badges look good on mobile
Mobile video?
- Only appears with Video content type selected
- Crops videos to 9:16
Lazy load?
- Doesn't currently work with landscape videos!
- Only appears with Video content type selected
- Sets video to a lazy load instead of a modal view.
Show Overflow
- Video columns expand the width of the page, with parts of the left and right cards will be partially off the page
- Randomize Order? - only available when Show Overflow is toggled to yes.
- When checked, the order of the videos will be randomized.
- Adaptive autoheight is not necessary as the override images should always be the same size.
Add/Edit Cards
- Card details - (accordion)
Card image
- Image field
- Select the photo or icon you would like to display
- Be sure to choose an appropriate image aspect ratio under the block configuration tab.
Title (required)
- Text field
- Text that displays inside badges (if shown) and title for the card
- For badges layout: this content will go inside the badge, so keep this as short as possible; recommend no more than 30 characters.
- For show overflow: the title is toward the bottom of the card
Hide title in card?
- Yes or no
- This field is only visible if Display badges? is checked
- Allows the title field to show in the badge only, so you can have a different title or no title in the card.
Content
- WYSIWYG
- Add text and/or HTML code for content displayed in the card
CTA Link
CTA Style
- Select the type of button you want in the card
- Video Details - (accordion)
Youtube Embed Code
- Tooltip: “Insert embed code from YouTube. For example: CqZeezv9xqw.”
- Text field
Video length
- Text field
- Displays in the lower right corner of the video thumbnail/placeholder image. Disappears when video is played
Video title
- For modal videos - Used for aria labels, but does not display on the page
- For lazyload videos - displays on video
Image Override
- Tooltip: Image will override YouTube thumbnail. Make sure video image dimensions are the same for all testimonials in the block. Youtube thumbnails are 1176x662px
- TIP: Recommend using an image with 4:3 aspect ratio if there is a lot of text content next to the video. Dimensions of 1024px by 768px have worked well before.
- Image (Array)
- If Show Overflow is toggled yes, make sure all the images are the same size.
- The images can be vertical or horizontal
Image Alt text
- Tooltip: Describe what’s in the youtube thumbnail image. Not necessary if you use the Image Override.
- Text field
Play Button Color
- Tooltip: Red Button is only used for low contrast, grayscale images where light and dark buttons won't work.
- Select: dark, light, or red
- Play buttons won't work when Show Overflow is toggled to yes
- The play button says "Watch the video" with an arrow
Play Button Alt Text
- Tooltip: Aria-label for the play button. Defaults to “play video”. Examples include: “Watch Sennai’s video”
- Text field
Introduction
- Includes standard block intro fields
- Section Title
- Section paragraph
Footer
- Includes standard block footer fields
- Footer content
- Footer CTAs
Configuration
Columns
Enable card shadows?
Adaptive autoheight?
- Yes or no
- Default is Yes
- Toggle to no if Show Overflow is toggled yes
Card image ratio
- If adding an image to any cards, select an appropriate aspect ratio
- Default - 16x9
- Options:
Center icons?
- Yes or No
- When image ratio is set to "icon", this field will appear
- Default - No (icon will be left aligned)
- If Yes, icon will be centered and a small gray horizontal rule will appear between the icon and the other card content
Anchor ID
Block Wrapper Classes
