...
| Table of Contents |
|---|
Description
A subsection is a special
...
instance of a
...
Filter Pane, where users can
...
open various subsections with the content panel
...
, in order to access additional settings.
...
...
Navigating to the Subsection | The Subsection |
|---|---|
 |  |
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.
uses the entire width of the content panel.
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)
...
after unapplied changes
...
have been made, may display an
...
Unsaved changes confirmation Popup.
Transitions
Entering the subsection will have a transition, as seen in
...
this 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
...
Zeplin link
...
Screen thumbnail
...
.
...
<<Screen with 200 width>>
Code
...