User Notifications

The notifications appear when the logged in user has new or existing notifications.

Empty notifications

No notifications

Notifications will appear here as new features and enhancements are introduced.

<div class="popover bottom popover--notifications fade in" style="display: block; position: relative;">
  <div class="arrow"></div>
  <div class="popover-inner">
    <div class="popover-content">
      <div class="user-notifications__empty">
        <svg class="user-notifications__empty-icon" role="presentation">
          <use xlink:href="#icon-notifications"></use>
        </svg>
        <h3 class="subheadline" tabindex="0">No notifications</h3>
        <p tabindex="0">Notifications will appear here as new features and enhancements are introduced.</p>
      </div>
    </div>
  </div>
</div>

Unread Notifications

Notifications

  • Hello world

    This is an unread notification.

  • Hello world

    This is another notification.

<div class="popover bottom popover--notifications fade in" style="display: block; position: relative;">
  <div class="arrow"></div>
  <div class="popover-inner">
    <div class="popover-content">
      <h3 class="subheadline popover__header" tabindex="0">Notifications</h3>
      <ul class="notifications__list">
        <li class="notification__item" tabindex="0">
          <div class="notification__header">
            <div class="indicator indicator--new notification__indicator"></div>
            <h4 class="notification__title">Hello world</h4>
            <time class="ghost-text--small notification__post-date"
                  title="Jan 23, 2018, 10:35 pm PST"
                  datetime="Jan 23, 2018, 10:35 pm PST">
              2 minutes ago
            </time>
          </div>
          <p class="notification__body">This is an unread notification.</p>
        </li>
        <li class="notification__item" tabindex="0">
          <div class="notification__header">
            <h4 class="notification__title">Hello world</h4>
            <time class="ghost-text--small notification__post-date"
                  title="Jan 23, 2018, 10:35 pm PST"
                  datetime="Jan 23, 2018, 10:35 pm PST">
              2 minutes ago
            </time>
          </div>
          <p class="notification__body">This is another notification.</p>
        </li>
      </ul>
    </div>
  </div>
</div>

Notification Bell

<user-notifications class="header__notifications ng-isolate-scope">
  <div class="user-notifications">
    <button class="btn--icon-only user-notifications__button" type="button" aria-label="Notifications. 0 unread." aria-live="polite" tabindex="0" uib-popover-template="'angular/modules/notifications/user/user-notifications-popover.html'" popover-class="popover--notifications" popover-is-open="$ctrl.isOpen" popover-placement="bottom" popover-trigger="'outsideClick'" has-popup="true">
      <!-- ngIf: $ctrl.unreadCount() > 0 -->
      <svg class="user-notifications__icon" role="presentation">
        <use xlink:href="#icon-notifications"></use>
      </svg>
    </button>
  </div>
</user-notifications>

Description

This pattern is used to notify customers of changes to UserTesting Labs.

Notification Badge

1
<span class="badge badge--red">1</span>

Description

This badge will appear when a customer has to complete information. See the “Notification” section on the Badges page for more details.

Do

  • Take care when sending many visual notifications it can be overwhelming
  • Use clear and precise language when notifying a customer

Don't

  • Use a notification badge when there is not something crucial for a customer to attend to