Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Popover

The popover is a compact overlay that can be attached to any element. It contains menu items and/or additional information. The Admin Bar and User corner are examples of patterns that use the popover.

.m-user-corner
  .m-user-corner__avatar.a-avatar.js-user-corner-avatar
    %a.js-popover-trigger{href: "#user-options", title: 'Your account', "data-popover": 'user-options', "aria-expanded": "false", "aria-controls": "user-options"}
      %span.a-avatar__initials.a-avatar__initials--coral FL

  %nav.m-popover.m-popover--user-options#user-options{role: "navigation"}
    %ul.m-popover__list
      %li.m-popover__list-item.m-icon-with-text
        = navigation_link_to('Your Courses', :home, '/path', class: 'm-popover__list-link')
      %li.m-popover__list-item.m-icon-with-text
        = form_tag(session_path, method: :delete) do
          = button_tag(render(:partial => "shared/svg_icons/sign_out") + content_tag('span', 'Sign out', class: 'm-icon-with-text__text'), class: 'm-popover__list-link')