Skip to main content

Interactive Elements

Buttons

All button styles must have hover/focus and active states, with the exception of the share button and the main navigation items. Use concise, consumer-friendly language on button labels so that your site visitors can easily understand a given buttons purpose. You’ll want to avoid internal language or marketing jargon. 

 

 

Links

All link styles must have  hover/focus and active states. Use consumer-friendly language for your link labels so that your site visitors can easily understand the link’s purpose.  You’ll want to avoid internal language or marketing jargon. For links that direct to external pages, a small icon should be displayed to the right of the hyperlinks. 

 

 

Dropdowns

Dropdowns should match the visual treatment of primary buttons.  

 

 

Accordions

Accordions are used to expand and collapse content within a limited region and must have hover/focus and active states.

In the collapsed state, content is hidden and the indicator icon should display as a plus sign. In the expanded state, content is visible and the indicator icon should display as a minus sign.

 

See examples of page layouts, features and functionality in CANVAS.

Our demo provides a glimpse of the flexibility of CANVAS and its templates.