Please don't forget to read Usage part of each element.
A handy list of links to quickly guide user in your interface.
Entrypoints allow the user to navigate through different screens in the interface, such as a dashboard.
An entrypoint is not a simple call to action, so it cannot be used on its own. Entrypoints are a list of links typically used in a dashboard to guide the user through different screens. If you need a unique link, please choose a button or a link.
State visible before click.
State visible when the cursor hovers the anchor and triggered by keyboard navigation or click.
State visible when no interraction is possible with the box. A tooltip can be added to inform the reason of deactivation.
Label should be consistent with the title of the intended destination.
There is no icon by default. When words are not enough, you can use icons to better communicate what the entrypoint does. The icon used must be directly related to the action that the users are taking, and displayed at the left of the label.
A container is displayed around the text label with a solid color.
Small detail (optional)
Provides complementary informations about the label. It can be an explanatory phrase, a price,â€¦
The arrow icon is considered as action icon and mandatorily displayed at the right of the container.
With notification dot
A notification dot can be added on the icon in the entrpoint to notify the user that something is new or updated. This option is only available for the positive entrypoint.
More info about notification dot
We can have from 1 to 4 entrypoints per row in desktop and from 1 to 2 per row in mobile.The height of the boxes is based on the highest box of the row.
The composition options are based on our default grid. Please refer to the gridding article for more information.
Open in new window
For accessibility reason, give users advanced warning when opening a new window. To provide a warning before automatically opening a new window or tab, we display a target blank icon.
Sizes and colors
Depending on the case, a button can be use with a simple link <a> or a <button> .
Each entrypoint must be wrapped with <div class="rs-entrypoint-container"> container. This container add a extra spacing of 10px at the bottom of the container to follow the guidelines.
Negative default entrypoint
class added on <div class="rs-entrypoint-container">
allows to switch all entrypoints to negative version.
Entrypoint with icon
Entrypoint with icon notification
Please, check accessibility and usage on Notification dot article.
Entrypoint with small details content
Entrypoint target blank
Entrypoint with small details and icon
class in addition with rs-entrypoint
allows to switch entrypoint to disabled. A tooltip is provided in order to notify the reason for it
For Screen Reader add:
Entrypoint as a button
Replace the <a> with <button> to have the button functionnality.