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.
collapsible to save space when the content contained is non-critical.heading and description properties to provide context to a user.collapsible when critical information or crucial controls are present.Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Enter | Toggles the "Expand"/"Collapse" focused component. |
Space | Toggles the "Expand"/"Collapse" focused component. |
Tab | Moves 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 Shift | Moves 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 |