Interactive Elements
These are elements that individuals can interact with including CTA buttons, links, dropdowns, utility buttons, and input elements.
CTA Buttons
Each button and link style conveys a level of emphasis and informs the user which
call to action is the most important.
Usage
CTA’s drive users to a desired result, use these different styles according the priority level of the particular CTA.
Module specifications
- Side padding should be consistent on all buttons: 16px
- Height is fixed at: 33px
- One word label is preferable on all CTAs
- Maximum width is 320 px. If the label is longer than this it will be truncated with ellipses.
Character counts (with spaces)
- CTA Label - 30 max characters
- Dropdown Label - 116 max characters
PRIMARY BUTTONS
Primary-btn (Fill)
- Hover state has a 20% shade over the default background color.
- Hover and click/tap style are the same
- Button label color option of black or white only.
Primary-btn (Outline)
- Outline color section will automaticaal apply button font color.
- Default to hover will fill the button with outline color.
- Hover and click style are the same
- Button label color of black or white only.
SECONDARY BUTTONS
Secondary-btn
- Button circle color and button label color is linked.
- Hover state has a 20% transparentcy shade over the default color.
- Button chevon icon size will be either black, white or transparent.
LINKS
Primary-link-1
- Default to hover will has a 20% transparency of black
- Link text underline appears on hover
Button-arrow
- Default to hover will has a 20% transparency of black
- Link text underline appears on hover
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
In-text-link
- In text link will have a buttom border for default state
- A 10% black transparency block highlights on hover
DROPDOWNS
Dropdown (Fill)
- Dropdown background color opens to all the colors within approved color palette
- Black or white label only depended on chosen color to pass WCAG 2.0 Accessiblity
- Hover state has a 20% transparency of black
Dropdown (Outline)
- Default state has a inner border of 1px. Border color is open to all colors within the approved palette
- Dropdown label is the same color as chosen for border
- Hover state will fill the button background of color chosen for border color.
- Hover state label will either be black or white to pass WCAG 2.0 accessibility
CTA Buttons, links, dropdowns, & utility buttons
All directional utility elements may only be used to support module
features. They should not be used as standalone elements to create a
new interactive feature within any modules.
Input elements
Basic elements that are components of other modules such as forms, faceted
search, etc. Each input element is also interactive and appears differently in various
interactive conditions.
Resources
For Zeplin access contact the UX Design Manager