Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Filter Drawer

    The filter drawer is a component that slides in from the side of the screen, providing an intuitive and accessible way to refine content, search results, or perform data-driven tasks on a web interface.

    Overview

    The filter drawer component is a good option for holding an extensive filtering situation. Use a filter drawer where the experience requires many filters options, providing the user a possibility to customize their preferences having a focused experience. This is useful not to clutter the main page with information that is not mandatory.

    Formatting

    Anatomy

    Accordion anatomy diagram
    1. Header: Contains the Drawer Title and Close Button.
    2. Body: Contains customizable filtering elements.
    3. Footer: Docked button component confirms applied filters and dismisses drawer.

    Layout

    Drawers were built to be placed on the right side of the screen, sliding to the left side when triggered, and adding an overlay to the previous shown screen. Drawers are responsive, which means they change their sizes in the experience depending on the screen size. For desktop or mobile’s views, the component will always cover the entire screen height, while its width will depend on the size chosen. 

    Breakpoint

    Drawer Width

    Large (1440px and up)

    390px

    Medium (992px – 1439px)

    390px

    Small (641px – 991px)

    390px

    X-Small (640px and below)

    100%

     

    Behavior

    The drawer is opened and closed by pressing a trigger, and it can also be closed by pressing anywhere on the main screen, outside the drawer. When the drawer component is open, an overlay appears behind it, shifting the focus from the page to the drawer.

    It is possible for a drawer to include a scroll feature in case the content displayed requires it. However, it is recommended to be as concise as possible to minimize cognitive load and to help users get back to their original task.

    Content

    Drawer header

    Be brief and descriptive about the subject or action a user must take. Try to use verb and noun combinations that clearly describe the drawer’s task or purpose; for example, 'Sort & Filter.' Header length should not exceed one line.

     

    Body text

    Body text length will adjust itself based on the size of the drawer component. Use the space to explain the purpose of the drawer and make the content useful for the user. Content can include imagery, charts, tables, or text.

     

    Capitalization

    Use sentence case in headers and body text, unless referring to a proper noun. For buttons, use title case.

     

    Punctuation

    Do not punctuate button text or header text. For the drawer body, use normal punctuation rules.