Panels
Format
Height
The panel should take up 100% of the height of its parent container. In most cases, that would be the viewport or main stage of your application.
Width, Structure and Form
Panels should reflect the same form and structure as modals. They also share the same width options as modals. Refer to the Modals component for details.
Usage
Right Side Panels
Use Right Panel when displaying actions that don't require content from the primary canvas.
Left Side Panels
Use Left Panel to display item details.
Size
Panels have different sizes available to cater to different types of content that needs to be displayed. Below is a summary of the different sizes along with the additional classes that are applied to the <div class=modal-dialog> element.
Size | Max. Width | Code Differentiation |
---|---|---|
Standard | 64rem/640px | No Class Required |
Small | 48rem/480px | modal-sm |
Medium | 76.8rem/768px | modal-md |
Large | 96rem/960px | modal-lg |
Extra Large | 120rem/1200px | modal-xl |