Popovers
Popovers are a type of dialog activated on click and contain an action for a user. The overall screen remains accessible to the user while a popover is open, unlike a modal.
Specifications
Standard Popover
Popovers contain many actions, such as a radio button group with a 'learn more' button. A popover with that pattern is a basic layout; addition actions can be included to suit your system needs.
Anatomy
1) Popover
background-color: White
border: 1px solid
border-radius: 8px
box-shadow: 0px 2px 24px (#808080)
2) Content Area
Popover Content (copy, images, etc.)
3) Arrow
4) No Arrow
Size and spacing
Action Menus
Action menus house a list of actions a user can interact with. A user can download, add an item to an internal favorites list, delete an item, and save with an action menu. Action menus allow continuous user activity. The level of complexity supersedes that of a one-click action and adds an additional tier.
Example
Anatomy
1) Popover
background-color: White
border: 1px solid
border-radius: 8px
box-shadow: 0px 2px 24px (#808080)
2) Content Area
Popover Content (copy, images, etc.)
3) Arrow
4) Icon
See Icon Library for specification
Size and spacing
Aon Consumer Experience & Design Group
200 E. Randolph St.
5th Floor
Chicago, IL 60601
global.design@aon.com
For best results, please view on Desktop in Chrome or Firefox.