Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography
Layout
Modals
Modals / Confirmation
Panels
Tabs
Actions & Inputs
Buttons
Checkboxs
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields
Status & Feedback
Badges
Progress Indicators
Tooltips
The panel component is used to contain content in a structured format. Panels are easy to scan and vary with layouts to support different content types, such as cards and forms.
◢
Overview
Panels should be used to house content structured around one topic.
Panels are a "parent" container and can be paired with Cards to create a "child" relationship.
USE CASES:
Separating content in long form experiences.
Containing an Import/Export experience and feedback.
Used in conjunction with Cards to create a visual organization for a number of similar items.
Anatomy
1. Panel
A Panel houses content like cards, text, and actions.
2. Action Button
The primary action is represented as a button and located on the top right of the panel. The only acceptable variation is when a panel contains form fields.
3. Header Text
Header text describes the intention of a panel.
4. Content
Description text is used as supporting content and can be used as instructional text.
Responsive
Desktop and Tablet
An example of a Desktop Modal.
An example of a Desktop Panel.
Mobile
An example of a Mobile Modal.
An example of a Mobile Panel.
Notes + Specifications
–————
Desktop & Tablet
Size: Full width
Corner Radius: 4px
Padding: 32px
Shadow: Floating
–————
Mobile
Size: Full width
Corner Radius: 0px
Padding: 16px
Shadow: Raised
–————
Actions
Actions are anchored to the upper right corner of Panels.
