Block

Block provides a way to organize the interface around groups of functionality.

Overview

Blocks can be statically open or collapsible to help promote hierarchy. Additionally, Blocks have the option to be draggable to reorder elements within the interface.

Usage

  • Organize logically grouped settings
  • Add and arrange content elements that have their own settings

Sample

Accessibility

Keyboard navigation

KeyFunction
EnterToggles the "Expand"/"Collapse" focused component.
SpaceToggles the "Expand"/"Collapse" focused component.
TabMoves focus into/out of the component or moves between calcite-block-sections. If the currently focused step is the last step, focus will leave the component
Tab and ShiftMoves focus into/out of the component or moves between calcite-block-sections. If the currently focused step is the first step, focus will leave the component

API reference

Properties

Slots

Styles

Events

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