WebMD Ignite DX Engine

Marquee Hero: Content Below Video 

<section class="hgm-marquee-hero content-mobile-below" data-text-color="1695FE" data-video="https://storage.coverr.co/videos/Xw8i01OZOr5eMVqw6BvtXjobTNvTClnuq?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjIzNzc2OTExfQ.hnOTUulnIRL6zU_2koOTH--xgnl4ksW0PArhQHSNwMo">
    <div class="hgm-marquee-hero__bg" data-bg=""></div>
    <video class="hgm-marquee-hero__video" data-src="" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop"></video>
    <div class="hgm-marquee-hero__overlay"></div>
    <div class="container">
        <div class="hgm-marquee-hero__content">
            <h1 class="marquee-title">Lorem ipsum dolor sit amet</h1>
            <h6>Etiam nec imperdiet ex. Proin risus massa, interdum in ligula vitae, posuere convallis turpis</h6>
            <button type="button" class="hgm-button">Call to Action<i class="fas fa-chevron-right right"></i></button>
        </div><!-- &__content -->
    </div>
</section><!-- .hgm-marquee-hero -->
 
<section class="hgm-marquee-hero content-mobile-below" data-text-color="1695FE"
         data-video="https://storage.coverr.co/videos/Xw8i01OZOr5eMVqw6BvtXjobTNvTClnuq?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjIzNzc2OTExfQ.hnOTUulnIRL6zU_2koOTH--xgnl4ksW0PArhQHSNwMo">
    <div class="hgm-marquee-hero__bg" data-bg=""></div>
    <video class="hgm-marquee-hero__video" data-src="" playsinline="playsinline" autoplay="autoplay" muted="muted"
           loop="loop"></video>
    <div class="hgm-marquee-hero__overlay"></div>
    <div class="container">
        <div class="hgm-marquee-hero__content">
            <h1 class="marquee-title">Lorem ipsum dolor sit amet</h1>
            <h6>Etiam nec imperdiet ex. Proin risus massa, interdum in ligula vitae, posuere convallis turpis</h6>
            <button type="button" class="hgm-button">Call to Action<i class="fas fa-chevron-right right"></i></button>
        </div><!-- &__content -->
    </div>
</section><!-- .hgm-marquee-hero -->
 
/* No context defined. */

Customizations

The Marquee Hero block component uses a combination of css classes and data attributes to customize behavior. Absolute horizontal & vertical center is the default position of both content and background image.

CSS Classes

  • content-left - position the text content to the left edge of the marquee
  • content-right - position the text content to the right edge of the marquee
  • content-top - position the text content to the top edge of the marquee
  • content-bottom - position the text content to the bottom edge of the marquee
  • content-mobile-below - position the content directly below the video or background image when display width is below 768px
  • image-top - set background image Y position to “top”
  • image-bottom - set background image Y position to “bottom”
  • image-left - set the background image X position to “left”
  • image-right - set the background image X position to “right”

Data Attributes

  • data-img - the URL for the image to be set as background; if not provided, a background image will not be set
  • data-video - the URL of the video (mp4 format); automatically overrides a background image if one was provided
  • data-height - the height of the marquee (tablet & above) measured in view-height units; numeric value of 1 - 100 expected
  • data-content-width - max width of the content region (default is 1200px); numeric value expected
  • data-text-color - hex value for the content text color; hashtag optional; only applicable when class “content-mobile-below” is used
  • data-content-bg-color - hex value for the background color of the content region; this color is overridden by additional background color settings when “content-mobile-below” class is used
  • data-mobile-content-bg-color - hex value for the background color of the content region; only applicable when class “content-mobile-below” is used
  • data-bg-alpha - opacity of the content region; a value of 1 - 99 is expected; this setting is disabled when class “content-mobile-below” is used
  • data-overlay-show - display an overlay above background image or video; value equal to 1
  • data-overlay-color - hex value for the overlay color; hashtag optional
  • data-overlay-alpha - opacity of the overlay; a value of 1 - 99 is expected
  • data-overlay-blend-mode - change the blend mode of the overlay; see list of expected blend mode values below

Blend Modes

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity