Get Help - Global - ViacomCBS UI Kit

This component elements which may affect an embedded demo. Open the preview in a new tab .

<!-- Demo button to toggle help -->
<p>
    <button type="button" class="btn btn-primary btn-lg" onclick="document.querySelectorAll('.get-help-global__icon.js-toggle')[0].click()">Toggle Help</button>
</p>
<!-- /Demo button to toggle help -->
<div class="get-help-global js-global-help">
    <div class="get-help-global__msg js-popup">
        <button type="button" class="close js-toggle" aria-label="Close">
            <i class="fa fa-times" aria-hidden="true"></i>
        </button>
        <div class="get-help-global__content">
            <div>
                <p>US employees, get in touch with an HR Representative for help navigating HR policies, programs and procedures.</p>
            </div>
            <div>
                <a href="#" class="btn btn-default">Visit AskHR&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
            </div>

            <div>
                <p>International employees, find the right contact for the help you need.</p>
            </div>
            <div>
                <a href="#" class="btn btn-default">Find your help contact&nbsp;<i class="fa fa-long-arrow-right"></i> </a>
            </div>

            <div>
                <p>Get help with technology, hardware issues or IT concerns.</p>
            </div>
            <div>
                <a href="#"><img src="/images/logo-pitstop.png" alt="pITstop" /></a>
            </div>

            <div>
                <p>Report a violation or concern through OPENLINE, Paramount’s hotline. You may remain anonymous if you wish.</p>
            </div>
            <div>
                <p>
                    <strong>(855) 833-5027</strong><br />
                    *available 24 hours a day, seven days a week
                </p>
                <p>
                    <a href="#">
                        <b>Make a report or follow up online&nbsp;<span class="fa fa-long-arrow-right"></span></b>
                    </a>
                </p>
            </div>
        </div>
    </div>
    <a href="#" class="get-help-global__icon js-toggle"><img src="/images/icon-help.svg" alt="" /></a>
</div>

.get-help-global {
  position: fixed;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 100;
  margin-left: 1.6rem;

  .close {
    color: $color-base-blue;
    opacity: 1;
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
  }
}

.get-help-global__icon {
  @include boxShadow(2);
  position: relative;
  float: right;
  border-radius: 50%;
}

.get-help-global__msg {
  @include boxShadow(2);
  display: none;
  border: 1px solid $color-grey-dark;
  background: $color-base-white;
  padding: 2.4rem;
  max-width: 57.6rem;
  max-height: calc(100vh - 8rem);
  margin-bottom: 0.8rem;
  overflow: auto;
}

.get-help-global__content {
  display: grid;
  gap: 1.2rem;

  @media (min-width: $breakpoint-tablet) {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.2rem;
  }

  > *:nth-child(2n) {
    margin-bottom: 2.4rem;

    @media (min-width: $breakpoint-tablet) {
      margin-bottom: 0;
    }
  }
}

$(function () {
  const $component = $(".js-global-help");
  $component.find(".js-toggle").on("click", function (e) {
    e.preventDefault();
    $(this).closest(".js-global-help").find(".js-popup").slideToggle();
  });
});