Block

Block provides a way to organize and group related controls or content.

Overview

Blocks should be used to house content and controls within Panel, most often as part of an application layout comprised of Shell Panels and Shell.

Usage

  • Organize and group controls or interactive elements.
  • Provide consistent spacing, placement, and arrangement of content within a Panel.

Sample

Best Practices

While similar to an Accordion, Blocks are unique in that they are intended to be the primary method of organization within a Panel. Conversely, Accordion can be used to organize non-critical or text-heavy content, outside of a Panel.

Blocks often contain application-specific functionality, controls, or information. While this frequently includes form controls or other interactive elements, it is also appropriate to use a Block to contain static or descriptive text-based content.

Blocks can also be collapsible - when enabled, ensure proper context is provided with the heading and description properties. Additional context can be provided by using an Icon in the icon slot.

Do use one or more Block(s) within Panel to house application controls and interactive elements.
Do make Block collapsible to save space when the content contained is non-critical.
Do make use of heading and description properties to provide context to a user.
Avoid using Block outside of a Panel.
Avoid making Block collapsible when critical information or crucial controls are present.

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.