...

Description

A subsection is a special

...

instance of a filter pane, where users can navigate from the content panel to various subsections in order to access additional settings.

Image Removed

...

Navigating to the Subsection	The Subsection
Image Added	Image Added

Usage & Behavior

General guidelines

Structure

The subsection consists of:

• A header.

• An exit button (X).

• The subsection content area.

• An Apply button at the bottom.

Placement and Positioning

The subsection area:

• is positioned beneath the filter header,

• uses the entire height of the remaining space.

Content

Content may vary depending on usage (e.g. an input form for advanced filtering).

Interaction

...

• Navigating to the subsection is done from the content panel

...

• , according to the specific scenario.

• Clicking the exit button returns to the initial content panel.

• Clicking the Apply button

...

• returns to the parent content panel and updates it accordingly (without applying the parent filter

...

• )

...

• .

• Navigating away (e.g. selecting another filter) while changes were made, may display an “unsaved changes” confirmation pop-up.

Transitions

Entering the subsection will have a transition as seen in the example

...

Best practices

Use:

• When a filter contains too many values and needs to be narrowed down

...

• .

• If additional options exist for a filter but are rarely used.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Code

<<a box containing the code - discuss with Femi>>