Recipes

Static header

A simple header with title and subtitle.

Live Editor

function StaticHeaderExample() {
  return (
    <ContentHeader
      title="Analytics Overview"
      subtitle="Summary of account performance"
      headingLevel="h2"
    />
  );
}

Header with actions

Actions are rendered to the right of the title area.

Live Editor

function HeaderWithActionsExample() {
  return (
    <ContentHeader
      title="Team Dashboard"
      subtitle="Manage your team"
      headingLevel="h2"
      headerActions={
        <Box display="flex" gap={300}>
          <Button appearance="secondary">
            <Icon name="filter-outline" mr={200} />
            Filter
          </Button>
          <Button appearance="primary">
            <Icon name="plus-outline" mr={200} />
            Add Member
          </Button>
        </Box>
      }
    />
  );
}

Header with slots

Use leftSlot and rightSlot to render content before and after the title.

Live Editor

function HeaderWithSlotsExample() {
  return (
    <ContentHeader
      title="Profile Settings"
      headingLevel="h3"
      leftSlot={<Icon name="gear-outline" mr={200} />}
      headerActions={<Button appearance="secondary">Edit</Button>}
    />
  );
}

Collapsible header

Use CollapsibleContentHeader with Collapsible to create a collapsible section.

Live Editor

function CollapsibleExample() {
  const [isOpen, setIsOpen] = React.useState(true);
  return (
    <Collapsible isOpen={isOpen} onOpenChange={setIsOpen}>
      <Container>
        <CollapsibleContentHeader
          title="Collapsible Section"
          subtitle="Click the chevron to toggle"
          headingLevel="h3"
          trigger={Collapsible.Trigger}
          triggerPosition="left"
        />
        <Collapsible.Panel>
          <Box p={400}>
            <Text.SmallBodyCopy>
              This content can be collapsed and expanded.
            </Text.SmallBodyCopy>
          </Box>
        </Collapsible.Panel>
      </Container>
    </Collapsible>
  );
}

Collapsible header with actions

Actions sit outside the trigger and don't toggle the collapse.

Live Editor

function CollapsibleWithActionsExample() {
  const [isOpen, setIsOpen] = React.useState(true);
  return (
    <Collapsible isOpen={isOpen} onOpenChange={setIsOpen}>
      <Container>
        <CollapsibleContentHeader
          title="Volume Breakdown"
          subtitle="Outbound message volume"
          headingLevel="h3"
          trigger={Collapsible.Trigger}
          triggerPosition="left"
          headerActions={
            <Button appearance="secondary">
              <Icon name="square-round-arrow-up-right-outline" mr={200} />
              Export
            </Button>
          }
        />
        <Collapsible.Panel>
          <Box p={400}>
            <Text.SmallBodyCopy>
              Volume data goes here.
            </Text.SmallBodyCopy>
          </Box>
        </Collapsible.Panel>
      </Container>
    </Collapsible>
  );
}