This section states the purpose of each reusable element.


Reusable Element - an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often.

Reusable Elements


The header reusable element sits at the top of each page and serves a few very important purposes. It does provide a place for company’s logo, navigation and page title which are part of a consistent user experience that all good websites share. Other common header features are, search, shopping cart (for ecommerce), login/logout, user profile and notifications (if applicable). The workflows included with this element are pretty straightforward to follow.
This reusable element is customizable, so it is possible to change styles and content of element while keeping workflows or using as inspiration for your own.
Image without caption
This reusable element is designed to be used on most pages, and contains the main "Group User Content". The "Group Footer Wrap" is used as the main container for all other group elements that hold text, button, icon, and other elements.
"GroupFocus Menu" is relative to another element, "Group Settings" is the location reference for the group.
Image without caption
The workflows on this element are mostly of navigation actions to different pages from the top container, and showing and hiding elements inside the reusable (i.e groups)

Signup / Login Popup

This reusable element is the default element that is used for login or signup, and also contains action for the password reset.
Image without caption
This reusable element is designed to be part of the template and provides the option to login or signup. It contains 2 groups elements, "Group Sign up" and "Group Log in" as the main containers for signup and login forms, that hold other elements, texts, inputs, and buttons.
Also has the pop-up element "Popup Reset Password" used for resetting the user's password which is triggered from login form.
Image without caption
Workflow actions that can be seen here, are showing and hiding different elements, log the user in and sign the user up. Additionally, there are actions for sending password reset email and set state values actions on elements.