Popup

When to use it

The Popup component is used to display a small overlay with additional information or actions. It is commonly used for tooltips, dropdown menus, and other interactive elements that require a temporary display of content.

Variants

To override the default color of the selected item, set --selected-color to the desired color. The "arrow" can be positioned in different corners using modifiers such as .c-popup--top-left and .c-popup--top-right.

What it looks like

Code examples

<div class="c-popup c-popup--top-right">
    <nav class="c-popup__body">
        <h2 class="c-popup__title">Land</h2>
        <a href="#/se" class="c-popup__item c-popup__item--selected">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g><circle cx="12" cy="12" r="12" fill="#09528A"/></g><path stroke="#EFD358" stroke-width="6" d="M12 0v24M0 12h24"></path></svg>
            Sverige
        </a>
        <a href="#/no" class="c-popup__item">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g><circle cx="12" cy="12" r="12" fill="#E63031"/></g><g><path stroke="#FFF" stroke-width="9" d="M12 0v24M0 12h24"></path></g><g><path stroke="#203B75" stroke-width="6" d="M12 0v24M0 12h24"></path></g></svg>
            Norge
        </a>
        <a href="#/dk" class="c-popup__item">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g><circle cx="12" cy="12" r="12" fill="#D01134"/></g><path stroke="#ECECEC" stroke-width="6" d="M12 0v24M0 12h24"></path></svg>
            Danmark
        </a>
        <hr class="c-popup__divider">
        <h2 class="c-popup__title">Språk</h2>
        <a href="#/se/sv/start" class="c-popup__item c-popup__item--selected">Svenska</a>
        <a href="#/se/en/start" class="c-popup__item">English</a>
        <a href="#/se/nb/start" class="c-popup__item">Norsk</a>
        <a href="#/se/da/start" class="c-popup__item">Dansk</a>
    </nav>
</div>

Accessibility notes

This component is ideal for use as a popover, which comes with some built-in accessibility support. However, the browser support is still an issue since it's a quite new addition to the spec. Currently, we only use popover popups in Blink Mobile, where we have 100% control over the both software and hardware setup.