HomeComponents

Sticky Footer

The sticky footer can be used on the whole page, or inside other components (ex: modal window). It remains fixed at the bottom of the window and cover the content underneath (ex: footer).

In order to minimise content hidden underneath the sticky, an extra class (ui-sticky-visible) can be added to the body element, to add padding at the bottom of the content area.

Live example 

<!-- class added to body when sticky footer is visible -->
<body class="ui-sticky-visible">
  ...
</body>

Basic

Example with some text and 2 buttons.

12 services selected

<!-- Sticky Footer -->
<div class="ui-sticky-footer">
  <div class="ui-sticky-footer__container">

    <!-- "left" section supports text, links or buttons -->
    <!-- if content is text, it must be inside a <p> tag -->
    <div class="ui-sticky-footer__left">
      <p><strong>...</strong> ...</p>
    </div>

    <div class="ui-sticky-footer__right">

      <!-- "ui-link-group" supports items of 3 types: btn, link and menu (ellipsis) - see other examples below -->
      <ul class="ui-link-group">
        <li class="ui-link-group__btn"><button class="ui-btn ui-btn--secondary">...</button></li>
        <li class="ui-link-group__btn"><button class="ui-btn">...</button></li>
      </ul>
    </div>
  </div>
</div>

With links, ellipsis (menu) and popover

Example with text, a list of links and a menu (ellipsis). The links which don't fit in the space available should be hidden and accessible through the ellipsis menu.

Hidden links and ellipsis menu functionality not ready...

12 services selected

<!-- Sticky footer with link and menu -->
<div class="ui-sticky-footer">
  <div class="ui-sticky-footer__container">
    <div class="ui-sticky-footer__left">
      <p><strong>...</strong> ...</p>
    </div>

    <div class="ui-sticky-footer__right">
      <ul class="ui-link-group">
        <li class="ui-link-group__link"><a class="ui-link ui-link--inline ui-link--bold">...</a></li>
        <li class="ui-link-group__link"><a class="ui-link ui-link--inline ui-link--bold">...</a></li>
        <li class="ui-link-group__link"><a class="ui-link ui-link--inline ui-link--bold">...</a></li>

        <!-- the last visible "link" MUST have a class "--last" -->
        <!-- this will need to be updated dynamically when popover links are shown/hidden -->
        <li class="ui-link-group__link ui-link-group__link--last"><a>...</a></li>

        <!-- markup for ellipsis menu with icon -->
        <!-- by default the menu is hidden and should only be displayed if links are hidden -->
        <li class="ui-link-group__menu ui-link-group__menu--visible">

          <!-- see "popover" section for more details on popover implementation -->
          <button class="ui-btn ui-btn--reset" data-popover="#popover1">
            <i class="ui-icon ui-icon--ellipsis-vertical"></i>
          </button>
          <div class="ui-popover" id="popover1">
            <div class="ui-popover__body">
              <a class="ui-link.ui-link--nav" href="#">...</a>
              <a class="ui-link.ui-link--nav" href="#">...</a>
              <a class="ui-link.ui-link--nav" href="#">...</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

With links, buttons and tooltip

Example with a back link. The area on the right has a mix of links and buttons.

Return to previous step of the process
<!-- Sticky footer with links, buttons and tooltip -->
<div class="ui-sticky-footer">
  <div class="ui-sticky-footer__container">
    <div class="ui-sticky-footer__left">

      <!-- example of back link -->
      <a class="ui-link ui-link--left" href="#">Return to previous step of the process
        <i class="ui-icon ui-icon--arrow-left"></i>
      </a>
    </div>

    <div class="ui-sticky-footer__right">
      <ul class="ui-link-group">

        <!-- mix of buttons and links -->
        <li class="ui-link-group__link">
          <a class="ui-link ui-link--inline ui-link--bold">...</a>
        </li>

        <!-- last visible "link" MUST have a class "--last" -->
        <li class="ui-link-group__link ui-link-group__link--last">
          <a>...

          <!-- example of tooltip next to a link -->
          <span class="ui-tooltip-icon ui-tooltip-icon--right" data-tooltip="...">
            <i class="ui-icon ui-icon--question"></i>
          </span>
          </a>
        </li>

        <li class="ui-link-group__btn"><button class="ui-btn">...</button></li>
      </ul>
    </div>
  </div>
</div>
Refinitiv © 2020