A component that extends the standard multi-selectable accordion with distinct visual styling to handle a drawer face and larger, more complex drawer contents.

Design complete

Drawer (v1)

  • Tufts University
    May 2018
    • City or Town


    • Postal code


    • State, Territory, or Province


    • Country

      United States

    Relevant coursework, licensures, and certifications

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi arcu libero, tristique in rhoncus a, facilisis nec orci. Aliquam erat volutpat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ornare pellentesque ex ac scelerisque.

  • University of Michigan
    June 2014
    • City or Town

      Ann Arbor

  • University of Maryland
    June 2006
    • City or Town

      College Park


  • 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.

Under review

Drawer with alt handle and icon

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