Close link

When a dialog or notification, or other such interactive elements can be closed by the user, we use a big ‘X’ icon link to give the user that control.

Example

Open in a new window

Code sample

1
2
3
4
5
<body data-controller="toggle-menu" data-menu-open="#main_menu">
  <a href="#main_menu" class="link_close">
    Close the main menu
  </a>
</body>

Usage notes

Primary focus styles included, using the focus abstract class.
This element is only visible if the main menu (in the Site header strap) is open, and the viewport is small.

Source files