Basic Dialog Guidelines

Need additional content from HighJump/TrueCommerce.

Description of Function

Need additional content from HighJump/TrueCommerce.

Implementation

Need additional content from HighJump/TrueCommerce.

Colors

Error/Message Title - PT Sans Regular, 24px, #f92f39 (Secondary 3)
Tab text selected - PT Sans Regular, 14px, #8fa65d (Primary 3)
Tab text not selected - PT Sans Regular, 14px, #333333 (Gray 7)
Error/Message text - Need additional content from HighJump/TrueCommerce.

Icons

Error Icon – FontAwesome – exclamation-triangle, 18px, #f92f39 (Secondary 3)
Message Icon - Need additional content from HighJump/TrueCommerce.

Error/Message Dialog

Need additional content from HighJump/TrueCommerce.

Description of Function

Need additional content from HighJump/TrueCommerce.

Implementation

Need additional content from HighJump/TrueCommerce.

Icons

Need additional content from HighJump/TrueCommerce.

Flyout (aka Pop-out)

Description of Function

The function for the Fly Out on Desktop and Landscape Tablet views is that once it has been launched, the user can select the arrow icon and it will collapse all content to the right. What remains is the Fly Out Tab that gives the ability to re-launch by selecting the arrow icon again. The Fly Out will appear using a slide function from left to right. The user also has the option of selecting the close icon which will cancel their view of the Fly Out completely.

Implementation

Need additional content from HighJump/TrueCommerce.

Fly Out Title heading- PT Sans Bold, 20px, #000000 (Black)
Sub-heading text- PT Sans Bold, 16px, #000000 (Black)
Informational text- PT Sans Regular, 16px, #333333 (Gray 7)

Flyout Panel

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.

Fly Out Title heading- PT Sans Bold, 20px, #000000 (Black)
Sub-heading text- PT Sans Bold, 16px, #000000 (Black)
Informational text- PT Sans Regular, 16px, #333333 (Gray 7)

Colors

Fly Out background blue- #c3ebf7 (Primary 5)
Left blue accent line- #9eddf0 (Secondary 14), 2px width, 100% height

Icons

Collapse icons- #8da9b1 (Secondary 15), fa-chevron-right, fa-chevron-left
Close icon- #9fbdc6 (Secondary 16), fa-close

Flyout Tab

Colors

2px width left blue accent line, #9eddf0 (Secondary 14)
2px height bottom blue accent line, #­9eddf0 (Secondary 14)
Fly Out background blue- #c3ebf7 (Primary 5)
120px width by 55px height (including accent lines)

Icons

Collapse icons- #8da9b1 (Secondary 15), fa-chevron-right, fa-chevron-left
Close icon- #9fbdc6 (Secondary 16), fa-close