Content Video Layout Background Anchor Settings
  1. Icon: Ensure you have the left asset panel open. Drag and drop the image into the dialogue or use the magnifying glass to search the Asset Console. A preview of the image will appear.
    • Alt text: Alt text is required for all images. Please see the accessibility section here for details
  2. Headline: 
    • Text: Set the text for your headline in this section
    • SEO tag: see SEO tag details here
    • Text style: select the proper text size for your content. See Text Styling for more information.  
  3. Subheadline: 
    • Text: use the open box, text editor to input a subheadline or descriptive text for your content.  
    • Text style: select the proper text size for your content. See Text Styling for more information.
  4. First Button:  if used with the secondary button, this button will appear on the right. This is intentionally designed for primary buttons according to brand guidelines. On desktop the buttons are positioned side by side, and on mobile/tablet the buttons stack on top of each other. The left/bottom button refers to where the button is positioned on desktop (left) and mobile/tablet (bottom).
  5. Second Button: If both buttons are being used, this button should have a lower-ranked style than the first button. E.g., if the first button's style is Primary, this button's style should be Secondary or Tertiary.
    • For both buttons you can configure the following settings: 
      • Label: Add button label text.  See styling list for more information.
      • Styling:  Select the button style. See styling list for more information.
      • Action: Select the behavior of the button.  See actions list for more information.
      • Tooltip: The tooltip text appears when you hover over the actionable content.

Use the options below to set up a video banner. If a video is selected, the other content (headline, etc.) will not show. The width and height fields are only used to calculate the aspect ratio; videos will scale to take up as much space as possible in the banner.

  1. Title: Add a video title. Required for accessibility and SEO; the Title is not displayed on the page.
  2. Transcript link: required for videos without audio description, and should be uploaded into the sites admin.
  3. Transcript link text: enter the text that will be visible by the author
  4. Transcript link alignment: choose from Left, Center, or Right
  5. Service: Choose from LinkedIn, LinkedIn Live, LinkedIn Learning, Panopto, Vidyard, Vimeo, Azure, Youku, YouTube, and Livestream. 
  6. Video ID: each video service should have a unique ID/embed code. Please see video codes below. All videos will be displayed using the 16:9 aspect ratio. Videos that don't conform to this ratio will be letterboxed/pillarboxed appropriately.
    • Video ID: see details for each player here
  7. Enable placeholder: Select the checkbox to enable an image placeholder that will be displayed to the user before they click to play the video.  Once selected, a fieldset will be displayed with the following options:
    • Image: select ‘Pick’ to search for your image within the DAM
    • Alt Text: Alt text is required for all images. Please see the accessibility section here for details
    • Tooltip: The tooltip text appears when you hover over the actionable content.
    • Accessibility Tooltip: The tooltip text that is spoken by screenreaders when focused on linkable content 
  1. Text Alignment: Choose to Center or Defaut (Left) align the banner text.
  2. Content Position: Use the sliders to set positioning of text (based on a 24 column grid) in the width of the component.
  1. Background color: see color and image details in the styling section  here

  2. Background/Foreground Contrast: The Background/Foreground Contrast setting will adjust according to the Background Color that has been selected.The author can change the setting, but if an inaccessible combination of color and contrast is selected, a warning message will appear. For more granular control, the option to customize these contrast settings also exist per device. See color and image details in the styling section  here 

    For more granular control, the option to customize these contrast settings also exist per device
  3. Image: 
    • Rendition Set: use the picker to search the DAM for the image/rendition set
    • Alt text: see the accessibility section here for more details
  4. Video: Video backgrounds only display on desktop devices. Ensure a suitable background image is set as a fallback for other devices. Additionally, only one component per page should utilize background video.
    • Background Video Best Practices:
      • Video will continuously loop and should not play audio
      • Maximum file size: 2 MB
      • Maximum duration: 30 seconds
      • Requires two formats: MP4 and Webm file
    • Video (MP4): Select the location of your video in its mp4 format.
    • Video (Webm): Selection the location of your video in webm format.
    • Play Tooltip: The text that appears when you hover over the play button.
    • Play Accessibility Tooltip: The text that is spoken by screenreaders when the play button is in focus.
    • Pause Tooltip: The text that appears when you hover over the pause button.
    • Pause Accessibility Tooltip: The text that is spoken by screenreaders when focused on the pause button. 
  5. Image/Video Position: A dropdown that allows you choose choose the position of your video on the banner. The default is set to “Top Center”
    • Resize to full desktop browser width: this is recommended to make banner images at least 1920px wide when using this option so that quality loss is minimized when a browser is stretched very wide.
  6. Height: this feature is intended to be used if using a photo/illustrative image, to add height in order to see the full picture properly across devices (Desktop, Tablet - Landscape, Tablet - Portrait, Mobile-Landscape, Mobile-Portrait) 
  1. Anchor Name: The field where you can assign a unique anchor name to this banner component so it can be linked to from within the page if necessary. See more anchor details in the actions section here

 

Examples

The banner is customizable enough to have countless variations, shown below are very basic examples of the different banner layout strategies supported in Inkwell.

Do's & Don'ts

Poor accessibility tends to be the main issue in some banners. Make sure your text is not only legible over certain backgrounds and images, but also meets contrast standards.

Another common mistake we see is embedding text into the banner background images themselves. While this may seem like a good idea for placing your text exactly where you want it, it has a negative impact on SEO and readability on different device breakpoints.