Shell

The Shell is a foundational layout component in Calcite, which enables the creation of rich, interactive experiences. Used in combination with components such as Shell Panel, Panel, Block, and Action Bar, Shell can be used to create consistent, compelling applications.

Overview

Shell can be used as a full-page experience, or given defined width and height to enable you to embed applications in other experiences or narrative content.

Shell provides a default slot for your primary application content.

Usage

  • When embedded within other content, the "alerts", "sheets" and "modals" slots facilitate placement of these components in relation to the Shell. For example, you can display a Modal within the bounds of an embedded Shell without it taking over the whole page.

Sample

API reference

Properties

Slots

Styles

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