Content Block

Components

Content Block

Code

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

import { ContentBlock } from '@sproutsocial/racine'

<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

Name	Type	Default
`title`	`string`
`subtitle`	`string`
`titleAs`	`\| "h1"` `\| "h2"` `\| "h3"` `\| "h4"`	`"h2"`
`subtitleAs`	`\| "h2"` `\| "h3"` `\| "h4"` `\| "h5"` `\| "p"`	`"h3"`
`isLoading`	`boolean`
`content`	`React.ReactNode`
`headerActions`	`React.ReactNode`
`contentProps`	`React.ComponentProps<typeof Box>`

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.

Recipes

Basic content block

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

import { ContentBlock } from '@sproutsocial/racine'

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

import { ContentBlock } from '@sproutsocial/racine'

<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 appearance="secondary">
      <Icon name="square-round-arrow-up-right-outline" mr={200} />
      Export
    </Button>
  }
/>

Loading state

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

import { ContentBlock } from '@sproutsocial/racine'

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

import { ContentBlock } from '@sproutsocial/racine'

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

import { ContentBlock,List,ListItem,ListItemContent } from '@sproutsocial/racine'

<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="circle-check-outline"
          text="Report completed"
          aside="1 hour ago"
        />
      </ListItem>
      <ListItem>
        <ListItemContent
          iconName="circle-exclamation-outline"
          text="Action required"
          aside="3 hours ago"
        />
      </ListItem>
    </List>
  }
/>

Multiple header actions

Combine multiple buttons or controls in the header actions area.

import { ContentBlock } from '@sproutsocial/racine'

<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 appearance="secondary">
        <Icon name="filter-outline" mr={200} />
        Filter
      </Button>
      <Button appearance="primary">
        <Icon name="plus-outline" mr={200} />
        Add Member
      </Button>
    </Box>
  }
/>

Semantic heading levels

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

import { ContentBlock } from '@sproutsocial/racine'

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

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

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