Naming

To ensure our interactions are easy to understand and manage we follow the below naming rules.

Formula

‍[Component/Element Name] [Trigger]

Example 1

Team Card (Hover In)
‍
This naming suggests there's an interaction when the user hovers over the team card.

Example 2

Nav (On Open)

This naming suggests there's an interaction when the .nav component opens.

Example 3

Page Wrapper Wipe (On Page Load)

This naming suggests there's a wipe interaction on the .page wrapper element on load.

Usage

Links

As a minimum we always apply one-step interactions on any links throughout the website project.