Panel

Panel is a container that can house interactions as well as live within other Calcite Components.

Overview

Panel provides a header with heading text and a summary. There are slots to add Actions and Icons to the start and end of the header. Panel's main content area is a blank container.

Panel works well with Shell Panel, Shell Center Row, and Flow. Combine Panels within Flow for an out-of-the-box drill-in experience.

Usage

  • Accommodate content that has an associated heading, and if applicable a description and/or Actions
  • Provide a drilled-in workflow with Flow
  • Contain a List

Sample

Accessibility

Keyboard navigation

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last, focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first, focus will leave the component.

API reference

Properties

Slots

Styles

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.