content-image

Description

A basic element that shows lazy loaded images and MP4s as silent looping video.

Benefits

Content image can use use responsive properties to show different src/width/height across breakpoints. In addition, content-image supports showing a silent looping mp4 instead of a GIF when an mp4 is used as the src. Responsive properties for width and height mean being able to better address cumulative layout shift across devices.

Properties

Property Attribute Description Type Default
alt alt string undefined
height height string '9'
hover hover If true, the media content will show only on hover string 'false|true'
lazyLoad lazy-load boolean true
src (required) src string undefined
videoType video-type string 'video/mp4'
width width string '16'

Slots

Slot Description
"mediaContent" Media content that can be revealed on hover

Examples

View Example in New Window
Content Blocks free of warranty. All rights reserved.
Structural Preview

content-image

  • Description
  • Benefits
  • Properties
  • Slots
  • Examples