Recipes

Basic content block

The simplest use case includes a title, subtitle, and content.

Live Editor

function BasicContentBlockExample() {
  return (
    <ContentBlock
      title="Analytics Dashboard"
      subtitle="Overview of your account performance"
      titleAs="h2"
      subtitleAs="h3"
      content={
        <Box>
          <Text.SmallBodyCopy>
            Your analytics data shows positive trends this month.
          </Text.SmallBodyCopy>
        </Box>
      }
    />
  );
}

Content block with header actions

Add action buttons or other interactive elements to the header using the headerActions prop.

Live Editor

function ContentBlockWithActionsExample() {
  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>
      }
      headerActions={
        <Button size="small" appearance="secondary">
          <Icon name="download-outline" mr={200} />
          Export
        </Button>
      }
    />
  );
}

Loading state

Use the isLoading prop to display a loader while content is being fetched.

Live Editor

function LoadingStateExample() {
  return (
    <ContentBlock
      title="Loading Data"
      subtitle="Please wait while we fetch your information"
      titleAs="h2"
      subtitleAs="h3"
      isLoading={true}
      content={
        <Text.SmallBodyCopy>
          This content will not be visible while loading.
        </Text.SmallBodyCopy>
      }
    />
  );
}

Content block with custom content styling

Use the contentProps to customize the content area styling, such as padding or background color.

Live Editor

function CustomContentStylingExample() {
  return (
    <ContentBlock
      title="Customized Content Area"
      subtitle="This content block has custom styling applied"
      titleAs="h2"
      subtitleAs="h3"
      content={
        <Box>
          <Text.SmallBodyCopy>
            The content area has custom padding and background.
          </Text.SmallBodyCopy>
        </Box>
      }
      contentProps={{
        p: 500,
        backgroundColor: "neutral.50"
      }}
    />
  );
}

Content block with rich content

The content area can contain any React components, including lists, charts, or forms.

Live Editor

function RichContentExample() {
  return (
    <ContentBlock
      title="Recent Activity"
      subtitle="Your latest notifications and updates"
      titleAs="h2"
      subtitleAs="h3"
      content={
        <List>
          <ListItem>
            <ListItemContent
              iconName="bell-outline"
              text="New message received"
              aside="2 min ago"
            />
          </ListItem>
          <ListItem>
            <ListItemContent
              iconName="check-circle-solid"
              text="Report completed"
              aside="1 hour ago"
            />
          </ListItem>
          <ListItem>
            <ListItemContent
              iconName="alert-circle-solid"
              text="Action required"
              aside="3 hours ago"
            />
          </ListItem>
        </List>
      }
    />
  );
}

Multiple header actions

Combine multiple buttons or controls in the header actions area.

Live Editor

function MultipleHeaderActionsExample() {
  return (
    <ContentBlock
      title="Team Dashboard"
      subtitle="Manage your team and permissions"
      titleAs="h2"
      subtitleAs="h3"
      content={
        <Text.SmallBodyCopy>
          Team management content goes here.
        </Text.SmallBodyCopy>
      }
      headerActions={
        <Box display="flex" gap={300}>
          <Button size="small" appearance="secondary">
            <Icon name="filter-outline" mr={200} />
            Filter
          </Button>
          <Button size="small" appearance="primary">
            <Icon name="plus-outline" mr={200} />
            Add Member
          </Button>
        </Box>
      }
    />
  );
}

Collapsible content block

Use isCollapsible to enable collapse/expand behavior. Defaults to open.

Live Editor

function CollapsibleExample() {
  return (
    <ContentBlock
      title="Collapsible Section"
      subtitle="Click the chevron to toggle"
      titleAs="h2"
      subtitleAs="h3"
      isCollapsible
    >
      <Text.SmallBodyCopy>
        This content can be collapsed and expanded.
      </Text.SmallBodyCopy>
    </ContentBlock>
  );
}

Collapsible content block (default closed)

Use defaultOpen={false} to start collapsed.

Live Editor

function CollapsibleDefaultClosedExample() {
  return (
    <ContentBlock
      title="Initially Collapsed"
      subtitle="Expand to see the content"
      titleAs="h2"
      subtitleAs="h3"
      isCollapsible
      defaultOpen={false}
    >
      <Text.SmallBodyCopy>
        This content starts hidden.
      </Text.SmallBodyCopy>
    </ContentBlock>
  );
}

Collapsible with header actions

Header actions render alongside the trigger and do not toggle the collapse.

Live Editor

function CollapsibleWithActionsExample() {
  return (
    <ContentBlock
      title="Volume Breakdown"
      subtitle="Outbound message volume"
      titleAs="h2"
      subtitleAs="h3"
      isCollapsible
      headerActions={
        <Button appearance="secondary">
          <Icon name="square-round-arrow-up-right-outline" mr={200} />
          Export
        </Button>
      }
    >
      <Text.SmallBodyCopy>
        Volume data goes here.
      </Text.SmallBodyCopy>
    </ContentBlock>
  );
}

Controlled collapsible

Use isOpen and onOpenChange for controlled mode.

Live Editor

function ControlledCollapsibleExample() {
  const [open, setOpen] = React.useState(true);
  return (
    <Box>
      <Button onClick={() => setOpen(!open)} mb={400}>
        {open ? 'Collapse' : 'Expand'} externally
      </Button>
      <ContentBlock
        title="Controlled Section"
        subtitle="Controlled by external button"
        titleAs="h2"
        subtitleAs="h3"
        isCollapsible
        isOpen={open}
        onOpenChange={setOpen}
      >
        <Text.SmallBodyCopy>
          Controlled content.
        </Text.SmallBodyCopy>
      </ContentBlock>
    </Box>
  );
}

Semantic heading levels

Use the titleAs and subtitleAs props to control the semantic heading level based on your page structure.

Live Editor

function SemanticHeadingLevelsExample() {
  return (
    <Box>
      <ContentBlock
        title="Main Section"
        subtitle="This uses h1 and h2"
        titleAs="h1"
        subtitleAs="h2"
        content={
          <ContentBlock
            title="Subsection"
            subtitle="This uses h3 and h4"
            titleAs="h3"
            subtitleAs="h4"
            content={
              <Text.SmallBodyCopy>
                Nested content with proper heading hierarchy.
              </Text.SmallBodyCopy>
            }
          />
        }
      />
    </Box>
  );
}