Content Header

Components

Content Header

Code

ContentHeader and CollapsibleContentHeader provide a shared header layout with title, subtitle, slots, and actions. CollapsibleContentHeader adds trigger and chevron support for collapsible sections.

import { ContentHeader } from '@sproutsocial/racine'

<ContentHeader
  title="Section Title"
  subtitle="A brief description of this section"
  headingLevel="h2"
  headerActions={
    <Button appearance="secondary">
      <Icon name="square-round-arrow-up-right-outline" mr={200} />
      Export
    </Button>
  }
/>

Properties

Name	Type	Default	Description
`title`	`string`		The header title text
`subtitle`	`string`		Optional subtitle text
`headingLevel`	`\| "h1"` `\| "h2"` `\| "h3"` `\| "h4"` `\| "h5"` `\| "h6"`	`"h4"`	Semantic heading level for the title. Defaults to "h4"
`subtitleAs`	`\| "h2"` `\| "h3"` `\| "h4"` `\| "h5"` `\| "p"`		Semantic element for the subtitle
`leftSlot`	`React.ReactNode`		Content rendered before the title
`rightSlot`	`React.ReactNode`		Content rendered after the title
`headerActions`	`React.ReactNode`		Actions rendered to the right of the header
`bordered`	`boolean`	`true`	Adds a border-bottom divider. Defaults to true

Overview

ContentHeader is a shared layout component that renders a header row with a title, optional subtitle, left/right slots, and an actions area. It is used internally by ContentBlock and Accordion to provide a consistent header pattern.

CollapsibleContentHeader extends ContentHeader with a trigger prop that wraps the title area in a collapsible trigger, adding a chevron icon that animates on open/close. Actions are rendered outside the trigger so they don't toggle the collapse.

Recipes

Static header

A simple header with title and subtitle.

import { ContentHeader } from '@sproutsocial/racine'

<ContentHeader
  title="Analytics Overview"
  subtitle="Summary of account performance"
  headingLevel="h2"
/>

Header with actions

Actions are rendered to the right of the title area.

import { ContentHeader } from '@sproutsocial/racine'

<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.

import { ContentHeader } from '@sproutsocial/racine'

<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.

import { CollapsibleContentHeader,Collapsible } from '@sproutsocial/racine'

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.

import { CollapsibleContentHeader,Collapsible } from '@sproutsocial/racine'

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>
  );
}

Chevron on the right

Set triggerPosition="right" to place the chevron on the right side (the default).

import { CollapsibleContentHeader,Collapsible } from '@sproutsocial/racine'

function RightChevronExample() {
  const [isOpen, setIsOpen] = React.useState(true);
  return (
    <Collapsible isOpen={isOpen} onOpenChange={setIsOpen}>
      <Container>
        <CollapsibleContentHeader
          title="Right Chevron"
          headingLevel="h3"
          trigger={Collapsible.Trigger}
          triggerPosition="right"
        />
        <Collapsible.Panel>
          <Box p={400}>
            <Text.SmallBodyCopy>Content here.</Text.SmallBodyCopy>
          </Box>
        </Collapsible.Panel>
      </Container>
    </Collapsible>
  );
}

Accessibility

Use headingLevel to maintain proper heading hierarchy (h1-h6)
The collapsible trigger has proper aria-expanded state via Radix
Focus styles use the shared focus ring mixin
Header actions are outside the trigger, so they are independently focusable and do not toggle the collapse

Best Practices

Use ContentHeader for static section headers and CollapsibleContentHeader when collapse behavior is needed
Choose triggerPosition based on the context — left for content blocks, right for accordion-style patterns
Keep header actions concise and relevant to the section content