Drawer

Usability

• Affordance: The drawer trigger needs to have sufficient affordance. That is achieved by the combination of the drawer handle (plus/minus button) and the drawer title (primary blue to match links) in close proximity to one another (same line) in a list of similar items (other drawers). This combination of elements should be retained otherwise the drawer may lack the affordance for users to know that this component will reveal additional content.
• Title: The title of the drawer in a list is often a title of the object it describes. Titles and names can be long thus in a drawer, as in a card, they span the full width of the component. Titles should be truncated coming out of the database rather than inserted into the component and allowed to line wrap. Because titles can wrap due to their length they should not be underlined.
• Shadow: The drawer content has an inset shadow to strengthen the relationship between the drawer button plus face and the drawer contents.

When to use

• This variation of drawers can be used when you want to list content where more context may be needed to differentiate the items in a list. In other words, if the user may need to see some details about the object being described in order to discern one from the other in a list. Examples include job applications and elements of a user's profile (education, experience, languages, references, etc.)

When to consider something else

• Avoid drawers when the details are vast. For example, we specifically did not employ this pattern in search results where the details of a job are too numerous to include within a drawer. It's less about number of items revealed and more about the length of the content within the drawer. If the drawer contents could be in their own view/page then perhaps a list of links would be preferred.

When to use

• This variation of drawers can be used when you have clear actions supported by iconography.