SALES & SERVICING COMPONENTS
Drawers
Overview
Drawers allow users to perform smaller transactions in the midst of a larger flow or on a dashboard, without leaving the main page or process. Drawers are generally modal, with the main page grayed out and inactive until the user closes the drawer.
Specifications
Drawer (Filter)
Drawers with filtering functionality allow the user to multi-select items using the Pill Selector. Buttons are pinned to the base of the browser window when the drawer content exceeds the user’s browser window height.
Text and default Pill state have a color of MetLife Darkest Gray (#333333). Pill Selection state color is MetLife Green (##A4CE4E).
Drawer (Form)
Drawers with form fields and dropdowns allow the user to enter data. Buttons are pinned to the base of the browser window when the drawer content exceeds the user’s browser window height.
Text and Default fields have a color of MetLife Darkest Gray (#333333).
Usage Guidelines
Long Filter Header
Long text can wrap around to the next line.
Scenario: Filtering
Scenario: Form Entry
When using a drawer to collect data from the user, traditional form fields should be implemented, as opposed to conversational-UI style fields.
