<div class="hgm-marquee-two-column">
    <div class="hgm-marquee-two-column__bg" data-bg=""></div><!-- &__bg -->
    <div class="hgm-marquee-two-column__overlay"></div><!-- &__overlay -->
    <div class="container">
        <div class="row hgm-marquee-two-column__breadcrumbs">
            <div class="col-md-auto">
                <nav aria-label="breadcrumb">
                    <ol class="hgm-breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
                        <li class="hgm-breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                            <a href="/" itemprop="item">
                                <span itemprop="name">Home</span>
                            </a>
                            <meta itemprop="position" content="1" />
                        </li>
                        <li class="hgm-breadcrumb__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                            <a href="/library" itemprop="item">
                                <span itemprop="name">Library</span>
                            </a>
                            <meta itemprop="position" content="2" />
                        </li>
                        <li class="hgm-breadcrumb__item active" aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                            <span itemprop="item">
                                <span itemprop="name">Data</span>
                            </span>
                            <meta itemprop="position" content="3" />
                        </li>

                    </ol>
                </nav>
            </div>
        </div><!-- .row -->

        <div class="row two">
            <div class="col">
                <h1 class="marquee-title">Cancer Care</h1>
                <figure>
                    <blockquote class="hgm-blockquote">
                        <p>Sub text can be added, but be sure to maintain a visual heirarchy between the higher priority
                            title and lower priority sub text.</p>
                    </blockquote>
                </figure>
                <button type="button" class="hgm-button ghost">Key Call to Action<i class="fas fa-chevron-right right"></i></button>
                <hr>
                <a href="#" class="hgm-marquee-two-column__link">Flexible link</a>
                <a href="#" class="hgm-marquee-two-column__link">Flexible link Two</a>
                <a href="#" class="hgm-marquee-two-column__link">Flexible link Three</a>
            </div>
            <div class="col">

                <div class="hgm-slideshow" data-click-count="0" data-caption-position="bottom" data-caption-bg-hex="E62B0C" data-caption-bg-alpha="45">
                    <ul class="hgm-slideshow__list">
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>Caption goes here and can be a long sentence or two.</figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21199.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form, by injected humour, or randomised
                                    words.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/portrait-friendly-doctor-isolated-gray_1328-5420.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/premium-photo/three-medical-intern-looking-through-x-ray-image-lungs-viral-pneumonia-covid-19-patient-clinic-medical-concept_359031-1555.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form, by injected humour.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/hands-unrecognizable-female-doctor-writing-form-typing-laptop-keyboard_1098-20374.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form, by injected humour, etc.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/medium-shot-smiley-doctor-with-coat_23-2148814212.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                    </ul><!-- &__list -->
                    <div class="hgm-slideshow__nav hgm-slideshow__nav--next"></div><!-- &__nav -->
                    <div class="hgm-slideshow__nav hgm-slideshow__nav--prev"></div><!-- &__nav -->
                </div><!-- .hgm-slideshow -->

            </div>
        </div><!-- .row -->
    </div><!-- .container -->
</div><!-- .hgm-marquee-two-column -->
<div class="hgm-marquee-two-column">
    <div class="hgm-marquee-two-column__bg" data-bg=""></div><!-- &__bg -->
    <div class="hgm-marquee-two-column__overlay"></div><!-- &__overlay -->
    <div class="container">
        <div class="row hgm-marquee-two-column__breadcrumbs">
            <div class="col-md-auto">
                <nav aria-label="breadcrumb">
                    <ol class="hgm-breadcrumb" itemscope
                        itemtype="https://schema.org/BreadcrumbList">
                        <li class="hgm-breadcrumb__item" itemprop="itemListElement" itemscope
                            itemtype="https://schema.org/ListItem">
                            <a href="/" itemprop="item">
                                <span itemprop="name">Home</span>
                            </a>
                            <meta itemprop="position" content="1" />
                        </li>
                        <li class="hgm-breadcrumb__item" itemprop="itemListElement" itemscope
                            itemtype="https://schema.org/ListItem">
                            <a href="/library" itemprop="item">
                                <span itemprop="name">Library</span>
                            </a>
                            <meta itemprop="position" content="2" />
                        </li>
                        <li class="hgm-breadcrumb__item active" aria-current="page"
                            itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
                            <span itemprop="item">
                                <span itemprop="name">Data</span>
                            </span>
                            <meta itemprop="position" content="3" />
                        </li>

                    </ol>
                </nav>
            </div>
        </div><!-- .row -->

        <div class="row two">
            <div class="col">
                <h1 class="marquee-title">Cancer Care</h1>
                <figure>
                    <blockquote class="hgm-blockquote">
                        <p>Sub text can be added, but be sure to maintain a visual heirarchy between the higher priority
                            title and lower priority sub text.</p>
                    </blockquote>
                </figure>
                <button type="button" class="hgm-button ghost">Key Call to Action<i
                        class="fas fa-chevron-right right"></i></button>
                <hr>
                <a href="#" class="hgm-marquee-two-column__link">Flexible link</a>
                <a href="#" class="hgm-marquee-two-column__link">Flexible link Two</a>
                <a href="#" class="hgm-marquee-two-column__link">Flexible link Three</a>
            </div>
            <div class="col">

                <div class="hgm-slideshow" data-click-count="0" data-caption-position="bottom"
                     data-caption-bg-hex="E62B0C" data-caption-bg-alpha="45">
                    <ul class="hgm-slideshow__list">
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>Caption goes here and can be a long sentence or two.</figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21199.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form, by injected humour, or randomised
                                    words.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/portrait-friendly-doctor-isolated-gray_1328-5420.jpg" class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/premium-photo/three-medical-intern-looking-through-x-ray-image-lungs-viral-pneumonia-covid-19-patient-clinic-medical-concept_359031-1555.jpg"
                                    class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form, by injected humour.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/hands-unrecognizable-female-doctor-writing-form-typing-laptop-keyboard_1098-20374.jpg"
                                    class="hgm-slideshow__image hgm-lazy">
                                <figcaption>There are many variations of passages of Lorem Ipsum available, but the
                                    majority have suffered alteration in some form, by injected humour, etc.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                        <li class="hgm-slideshow__item">
                            <figure data-bg="https://img.freepik.com/free-photo/medium-shot-smiley-doctor-with-coat_23-2148814212.jpg"
                                    class="hgm-slideshow__image hgm-lazy">
                                <figcaption>Contrary to popular belief, Lorem Ipsum is not simply random text.
                                </figcaption>
                            </figure><!-- &__image -->
                        </li><!-- &__item -->
                    </ul><!-- &__list -->
                    <div class="hgm-slideshow__nav hgm-slideshow__nav--next"></div><!-- &__nav -->
                    <div class="hgm-slideshow__nav hgm-slideshow__nav--prev"></div><!-- &__nav -->
                </div><!-- .hgm-slideshow -->

            </div>
        </div><!-- .row -->
    </div><!-- .container -->
</div><!-- .hgm-marquee-two-column -->
/* No context defined. */

Customizations

The Marquee Two Column block component uses a combination of css classes and data attributes to customize behavior.

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-text-color - hex value for the content text color; hashtag optional
  • data-link-color - hex value for the marquee flexible link colors; hashtag optional
  • data-bg-color - hex value for the background color of the Marquee; hashtag optional
  • 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