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

Also known as: video swiper, card swiper, social videos

Description

A multi-purpose block that displays multiple cards/panels in a swiper. Can showcase videos, text, and/or images.


Examples 

Example 1 - Data table with navigation badges

Source: BBA Careers

Example 2 - Social videos (IG Reels or YT Shorts)

Source: BBA Majors

Source: PMBA Webinars and Podcasts 

Example 4 - Overflow videos

Source: Companies & Recruiters

Use When

Editorial Guidelines

Follow our general Web Copy General Guidelines in addition to the following:

For text/image cards

  • Badges (optional)
    • Small navigational buttons displayed above the cards that feature a word or two to indicate the topic of each card in the swiper
    • Character limit: 1-2 words, 30 characters for each badge
  • Cards must have similar amounts of copy
  • Images are optional, but if one card has a photo, they all need to have a photo
  • Card title (recommended)
    • If using badges, the card title should match or contain the badge copy for continuity
  • Card content
    • Ideal length is one or two short phrases or 3-4 bullet points
    • For data tables, limit number of rows to ~10
  • Card button/link (optional)
    • Link text should be specific to each topic/card

For videos

  • Videos must be uploaded to YouTube and captioned accurately. Share the YT link with the web developer when ready.
  • Badges (optional)
    • Small navigational buttons displayed above the videos that feature a word or two to indicate the topic of each video in the swiper
    • Character limit: 30 characters

Traditional Videos (landscape)

  • Video title (required for all videos)
    • Character limit: 30 characters
    • Recommend matching (or shortening) the title of the video on Youtube
  • When you want the video to appear next to some copy
    • Card title (required)
      • If using badges, the card title should match or contain the badge copy for continuity
    • Card content (optional)
      • Ideal length is one or two short phrases or 3-4 bullet points
      • Give users a few highlights from the video
    • Card button/link (optional)

Social Videos (vertical)

  • These are typically Instagram Reels uploaded as Shorts to our YouTube channel.
  • Need 3 or more videos for this layout. 
  • Note that we cannot show a mix of content (e.g. we can't show a YT Short next to a photo with some copy)
  • Video title (required for all videos)
    • Character limit: 30 characters
    • Recommend matching (or shortening) the title of the video on Youtube. Can move subject's name to the bottom text for length 
  • Bottom text (optional)
    • Character limit: 30 characters
    • Used to display name, grad. year, major, or other details about the video's subject(s)

Design Assets Needed

Images

Card image (optional)

  • Photo - jpeg file; standard horizontal size
    • Dimensions: 2400x1600px
    • We can choose the aspect ratio for card photos, options:
      • 16:9, 21:9, 4:3 
  • Icon - svg file

Videos

  • Videos must be uploaded to YouTube.

Video cover image

  • We can use the cover image from YT or upload a different one to override it
  • Cover image override - jpeg
    • Face should not be perfectly centered, as it will be covered by the play button. We recommend cropping so the face is in the top third of the image.
    • For traditional, landscape videos
      • Dimensions: 1176x662px
      • Aspect ratio: 16:9
    • For vertical, social videos
      • Dimensions: 1170x1807px or 585x904px
      • Aspect ratio: 9:16

Video options

Video player type

  • Embed video on the page or have it open in a modal (popup window)
    • Embedded video - use when a video is displayed large or for social videos
    • Video modal - use when overflow layout is selected, when you want the video watching experience to have more impact, or when the video is better viewed full screen
Video layout options

Large video in a single column

Source: WSB 125th Anniversary

50/50 layout with video next to copy

Source: BBA Study Abroad

3 or more vertical videos in 3 columns

Source: BBA Majors

3 or more landscape videos in overflow layout

Source: Companies & Recruiters

Implementation

Dev Notes

  • The block displays swiper arrows and creates swiping functionality when the content requires it. 
  • Click and drag swiping is disabled for video content on desktop.

ACF 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 (video)

  • Only appears with Video content type selected
  • Doesn't currently work with landscape videos
  • Sets video to a lazy load embed instead of inside a modal

Show Overflow

  • Video columns expand to fill the width of the page, parts of the left and right cards will overflow 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 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
  • Add URL and link text
CTA Style
  • Select your preferred button style
Youtube Embed Code
  • Insert embed code from YouTube. Example: CqZeezv9xqw.
Video length
  • 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 - The title displays on video, near the top
Image Override
  • Tooltip: Image will override YouTube thumbnail. Make sure video image dimensions are the same for all cards 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
  • Describe what’s in the youtube thumbnail image. Not necessary if you use the Image Override.
Play Button Color
  • Select: dark, light, or red
  • Red Button is only used for low contrast, grayscale images where light and dark buttons won't work.
  • Play button colors won't apply when Show Overflow is toggled to yes
    • Instead, the play button says "Watch the video" with an arrow
Play Button Alt Text
  • Aria-label for the play button. Defaults to “play video”. Example: “Watch Sennai’s video”

Introduction

  • Includes standard block intro fields
    • Section Title
    • Section paragraph
  • Includes standard block footer fields
    • Footer content
    • Footer CTAs


Columns

  • Select the number of columns to display for XL screens. Other column breakpoints will be set for you.

    • Default = 1 column
    • Options: 1, 2, 3, 4
  • For social videos, recommend 2-3 columns
Enable card shadows
  • Yes or no
  • Default is Yes
  • Only available for text/image layout (not for videos)
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:
    • icon
    • 16x9 
    • 21x9
    • 4x3
    • 1x1
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

Resources