<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="#" 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">
                <img class="hgm-lazy hgm-marquee-two-column__image" data-src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg" />
            </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="#" 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">
                <img class="hgm-lazy hgm-marquee-two-column__image" data-src="https://img.freepik.com/free-photo/team-young-specialist-doctors-standing-corridor-hospital_1303-21198.jpg"/>
            </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