Page Tabs
Description of Function
The Page Tabs were created as a way for the Platform to accommodate large amounts of data and separate it into organized buckets without a lot of scrolling.
Implementation
This treatment should be used for all Page Tabs, unless otherwise specified. Tab height – 40px Labels – PT Sans Bold, 14px, #FFFFFF (White)
Colors
Gray Background color (Unselected) – #CCCCCC (Gray 2)
Green Background color (Selected) – #8fa65d (Primary 3)
Section Tabs
Description of Function
The Section Tabs were created to accommodate for data to be separated further down from the page level.
Implementation
Section Tabs are usually used as part of a grid or for Card data. The selected tab underline should be the same width as the tab text be 5 pixels directly below the text. This treatment should be used for all Section Tabs, unless otherwise specified. Selected Tab underline – height 40px Selected Tab Label – PT Sans Bold, 17px, #8fa65d (Primary 3) Unselected Tab Label – PT Sans Bold, 17px, #000000 (Black)
Colors
Selected Tab underline – #8fa65d (Primary 3)
Wizard Tabs
Description of Function
The Wizard Tabs were created to accommodate a progression that a user needs to complete. They look very much like the standard Page Tabs but have the number added to the tab to indicate which step in the progression the data/forms/setup the user is currently on.
Implementation
The Wizard Tabs are virtually identical to the Page Tabs except for the number that is present on each tab. Tab height – 40px Labels – PT Sans Bold, 14px, #FFFFFF (White) Number Circle – 25 X 25 (px)
Colors
Gray Background color (Unselected) – #CCCCCC (Gray 2)
Green Background color (Selected) – #8fa65d (Primary 3)
Number Circle – #FFFFFF (White)
Unselected Number Text – PT Sans Bold, 16px, #CCCCCC (Gray 2)
Selected Number Text – PT Sans Bold, 16px, #8fa65d (Primary 3)
Instructions Tone
Description of Function
The Instructions tone should be conversational. It should provide the user with enough detail to determine whether they need to follow the Basic or Advanced path. Need additional content from HighJump/TrueCommerce.
Implementation
Always present the user with the checkbox that allows them to opt out of the instructions. The section icon is followed with the Header and then the body copy. A rule separates the content with the on-page buttons. Header text – PT Sans Regular, 30px, #333333 (Gray 7) Main Copy text – PT Sans Regular, 16px, #333333 (Gray 7) Content End Rule – 1px, #CCCCCC (Gray 2)
Icons
User Icon – FontAwesome – fa-users, 60px, #56aace (Primary 4)
User Template Icon – FontAwesome – fa-user-circle, 60px, #56aace (Primary 4)
Role Icon – FontAwesome – fa-address-card, 60px, 60px, #56aace (Primary 4)
Basic vs. Advanced
Description of Function
There are two types of Wizards, Basic and Advanced. The Basic path gives the user instructional text with every step in the process. In addition to that each step in the process is numbered and must be followed in order. The Advanced Wizard does not have the instructions included with each step and they are not numbered and can be completed out of order.
Need additional content from HighJump/TrueCommerce.
Implementation
Always present the user with the checkbox that allows them to opt out of the instructions. The section icon is followed with the Header and then the body copy. A rule separates the content with the on-page buttons. Need additional content from HighJump/TrueCommerce.
Header text – PT Sans Regular, 30px, #333333 (Gray 7)
Main Copy text – PT Sans Regular, 16px, #333333 (Gray 7)
Content End Rule – 1px, #CCCCCC (Gray 2) x, #FFFFFF (White)
Icons
User Icon – FontAwesome – fa-users, 60px, #56aace (Primary 4)
User Template Icon – FontAwesome – fa-user-circle, 60px, #56aace (Primary 4)
Role Icon – FontAwesome – fa-address-card, 60px, 60px, #56aace (Primary 4)
Dashboard Icon (Button)
Description of Function
Need additional content from HighJump/TrueCommerce.
Implementation
Header text – PT Sans Bold
Main Copy text – PT Sans Bold
Icons
User Icon – FontAwesome – fa-users, 60px, #56aace (Primary 4)
User Template Icon – FontAwesome – fa-user-circle, 60px, #56aace (Primary 4)
Role Icon – FontAwesome – fa-address-card, 60px, #56aace (Primary 4)
