Skip to main content

ContentBlock

ContentBlock is a container component with a header section for titles and actions, and a content area for displaying information with optional loading and collapsible states.

Live Editor
function ContentBlockExample() {
  return (
    <ContentBlock
      title="Volume Breakdown - Outbound"
      subtitle="View a breakdown of your outbound volume."
      titleAs="h2"
      subtitleAs="h3"
      content={
        <Text.SmallBodyCopy>
          Here is some content inside the content block.
        </Text.SmallBodyCopy>
      }
    />
  );
}

Properties​

System Props: COMMON, LAYOUT, FLEXBOX, GRID

Overview​

ContentBlock is a structured component that provides a consistent layout for content sections. It includes a header area with title, subtitle, and optional action buttons, followed by a content area. The component is built on top of Container and renders as a semantic section element.

Accessibility​

  • ContentBlock renders as a semantic section element for proper document structure
  • Use titleAs and subtitleAs props to maintain proper heading hierarchy (h1-h6)
  • The component handles loading states with visual indicators
  • Ensure action buttons in headerActions have appropriate labels
  • When collapsible, the trigger has proper aria-expanded state and header actions remain independently focusable

Best Practices​

  • Always provide meaningful titles and subtitles that describe the content
  • Use appropriate heading levels that fit within your page's heading hierarchy
  • Keep header actions concise and relevant to the content block
  • Use the loading state for asynchronous content to provide feedback to users