WebMD Ignite DX Engine

Alerts: With Strip 

<div class="hgm-alert alert-collapsed" role="alert" data-collapse-logic="open-default">
    <div class="hgm-alert__container">
        <button type="button" class="hgm-button hgm-alert__close" aria-label="Close">Close<i class="fas fa-times right"></i></button>
        <div class="row hgm-alert__row">
            <div class="col">
                <i class="fas fa-exclamation-triangle"></i>
                <h4>Example alert</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                <a href="#" class="hgm-button">Action button <i class="fas fa-chevron-right right"></i></a>
            </div>
        </div><!-- &__row -->
    </div><!-- &__container -->
    <div class="hgm-alert__strip" tabindex="0" role="button" aria-pressed="false">
        Custom message shown here
    </div><!-- &__strip -->
</div><!-- hgm-alert -->
 
<div class="hgm-alert alert-collapsed" role="alert" data-collapse-logic="open-default">
    <div class="hgm-alert__container">
        <button type="button" class="hgm-button hgm-alert__close" aria-label="Close">Close<i class="fas fa-times right"></i></button>
        <div class="row hgm-alert__row">
            <div class="col">
                <i class="fas fa-exclamation-triangle"></i>
                <h4>Example alert</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
                <a href="#" class="hgm-button">Action button <i class="fas fa-chevron-right right"></i></a>
            </div>
        </div><!-- &__row -->
    </div><!-- &__container -->
    <div class="hgm-alert__strip" tabindex="0" role="button" aria-pressed="false">
        Custom message shown here
    </div><!-- &__strip -->
</div><!-- hgm-alert -->
 
/* No context defined. */

Functionality

  • Font Awesome Icon is optional
  • Strip label is optional, but recommended in most cases; it allows site visitor to reveal the site alert when the content container is collapsed

Collapse logic is summarized below; please note the preferred order of the flow (accessible within the CMS setup):

  • Open by default on every page load; site visitor can manually collapse the alert
  • Open at all times. Site visitor cannot collapse the alert
  • Open until hidden, then collapsed for the session
  • Open on the first page load, then collapsed for the session
  • Collapsed by default on every page load

Customization via Data Attributes

Use data attributes directly on the site alert to change the visual behavior; the following data attributes are currently in use:

  • data-bg-color - alert background color; accepts hex value with or without hashtag
  • data-text-color - alert text color; accepts hex value with or without hashtag
  • data-close-bg-color - background color of the close button
  • data-close-color - text color of the close button
  • data-strip-bg-color - background color of the strip label
  • data-strip-color - text color of the strip label