Versions Compared

Old Version 4

changes.mady.by.user Todd McGill

Saved on

compared with

New Version Current

changes.mady.by.user Todd McGill

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

A jumbotron is a design element that applies a background image to a block of content. A videotron does the same, but uses a background video instead. Images and videos used as backgrounds are intended for decorative purposes only. These elements are not intended to convey content explicitly. Videos are automatically muted and looped.

Jumbotrons can be applied to:

  • Page headers
  • Page headings
  • Page sections

Videotrons can be applied to:

  • Page headers
  • Page headings

Examples

Image Added

A maximized window-width videotron heading.

Image Added

A auto-sized container-width jumbotron heading.

Datadef elements

The following datadef elements apply to all jumbotron and videotron instances.

Datadef elementPresenceDescription
... > Jumbotron/Videotron > Aspect ratio
  • Page header
  • Page heading
  • Page sections

 

Used to set the aspect ratio of the jumbotron or videotron:

  • auto - the aspect ratio is set according to the dimensions of the content laid over the image or video.
  • maximize - the jumbotron or videotron will be sized to occupy all available screen space in the browser window.
  • 3:2 - common native aspect ratio for photos.
  • 16:9 - common native aspect ratio for videos.
  • custom - select this option to set a custom aspect ratio.
... > Jumbotron/Videotron > Custom aspect ratio (w:h)
  • Page header
  • Page heading
  • Page sections
Appears only if 'Aspect ratio' is set to 'custom'. Provide the aspect ratio in w:h format, with a colon separating the width value from the height value.
... > Jumbotron > Background image
  • Page header
  • Page heading
  • Page sections

Applies only to jumbotrons. Identifies the image to be used as the header background.

Tips:

  • Large images look best here (1600 to 2000 pixels wide), but be mindful of the balance between image quality and file size. Page load time can be affect by heavy images.
... > Videotron > Video
  • Page header
  • Page heading

Applies only to videotrons. Identifies the video to be used as the header background.

Tips:

  • Videos in mp4 format offer the greatest browser compatibility.
  • Large videos can significantly affect page load times. Be mindful of playback duration and resolution (720p is usually sufficient).
  • Large videos can be optimized for the web with Handbrake.
... > Videotron > Still frame image
  • Page header
  • Page heading

Applies only to videotrons. Identifies the image to be displayed when the background video cannot be loaded or played.

Tips:

  • Use the first frame of the background video as the still frame image.
  • Ensure the image dimensions match the video dimensions.
... > Videotron > Loop video
  • Page header
  • Page heading
Indicates whether the video will loop playback.
... > Jumbotron/Videotron > Content alignment
  • Page header
  • Page heading
Aligns the additional header content to either left or center.
... > Jumbotron/Videotron > Overlay value
  • Page heading
  • Page sections

Indicates the color value of the jumbotron/videotron overlay:

  • dark - applies a dark overlay with light text.
  • medium - applies a medium overlay with light text. A slight drop shadow is also applied to the text to enhance readability and color contrast.
  • light - applies a light overlay with dark text.
... > Jumbotron/Videotron > Additional content
  • Page header
  • Page heading

Provide any additional content here to be displayed in the page header below the masthead.

Accessibility note: do not insert headings here when working with page headers. You can achieve the look of headings using the provided wysiwyg styles. Refer to 'Styling wysiwyg content'.

... > Jumbotron/Videotron >

...

  • Page header
  • Page heading

...

Width
  • Page heading
  • Page sections

Indicates the width of the heading background image or video.

  • container - the background image or video with is constrained to the page container width, which varies depending on screen size:
    • Large: 1170px
    • Medium: 970px
    • Small: 750px
  • window - the background image or video width matches the width of the browser window.
    Note: this option is not compatible with page layouts containing secondary navigation or sidebar elements. 

 

 

...

Examples

...