Block Section | Calcite Design System

Child component of Block

Overview

Blocks sections can help organize and group content within a Block.

Do consider using Block Sections to save space when content is not essential.

Do use the text property to provide context to a user when Block Section content is collapsed.

Avoid using Block Sections to display essential information. When the component is collapsed slotted content will not be visible.

Property	Attribute	Description	Type	Default
expanded	expanded	When `true`, expands the component and its contents.	`boolean`	`false`
iconEnd	icon-end	Specifies an icon to display at the end of the component.	`IconName`
iconFlipRtl	icon-flip-rtl	Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).	`FlipContext`
iconStart	icon-start	Specifies an icon to display at the start of the component.	`IconName`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
open	open	deprecatedin v3.1.0, removal target v6.0.0 - Use `expanded` prop instead. When `true`, expands the component and its contents.	`boolean`	`false`
scale	scale	Specifies the size of the component.	`Scale`	`"m"`
status	status	deprecatedin v2.8.1, removal target v6.0.0 - Use `icon-start` instead. Displays a status-related indicator icon.	`Status`
text	text	The component header text.	`string`
toggleDisplay	toggle-display	Specifies how the component's toggle is displayed, where: `"button"` sets the toggle to a selectable header, and `"switch"` sets the toggle to a switch.	`BlockSectionToggleDisplay`	`"button"`

Name	Description
default (unnamed)	A slot for adding custom content.

Name	Description
--calcite-block-section-background-color	Specifies the component's background color.
--calcite-block-section-border-color	Specifies the component's border color. When `expanded`, applies to the component's bottom border.
--calcite-block-section-header-text-color	Specifies the component's header text color.
--calcite-block-section-text-color	Specifies the component's text color.
--calcite-block-section-text-color-hover	Specifies the component's text color on hover.
--calcite-block-section-content-space	Specifies the padding of the component's content in `default` slot.

Name	Description	Behavior
calciteBlockSectionCollapse	Fires when the component's content area is collapsed.	bubblescomposed
calciteBlockSectionExpand	Fires when the component's content area is expanded.	bubblescomposed
calciteBlockSectionToggle	Fires when the header has been clicked.	bubblescomposed

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component's first tabbable element.	`setFocus(options?: FocusOptions): Promise<void>`