---
title: Section
category: General
summary: Sections are used within `Page` components to break up content into sections that always display a `Toolbar` at the top.
---

```jsx live
render(
  <Section
    title="Text Notifications"
    helpContent="Receive text messages to notify you of new received emails. Some scheduling requests allow replying by text."
    grow={1}
    shrink={1}
  >
    <Card spacing={<Divider />}>
      {[
        'General Emails',
        'Scheduling Requests',
        'Reminders',
        'Scheduling Replies',
      ].map((label) => (
        <Card.Section
          key={label}
          as={Checkbox}
          axis="horizontal"
          label={label}
          grow={1}
          spacing={1}
        />
      ))}
    </Card>
  </Section>
)
```

```jsx live
render(
  class extends React.Component {
    state = {
      isOpen: false,
      value: '',
    }

    toggleOpen = () => {
      this.setState((state) => ({
        isOpen: !state.isOpen,
      }))
    }

    render() {
      const { isOpen } = this.state
      return (
        <Section
          title="Tags"
          helpContent="Tags are global attributes or abilities usually not related to a specific team. However, some teams are assigned using multiple tags as criteria."
          actions={
            <Button
              title={isOpen ? 'Cancel' : 'Add'}
              onClick={this.toggleOpen}
            />
          }
          grow={1}
          shrink={1}
        >
          <Collapse open={isOpen} lazy>
            <Combobox.Popover
              autoFocus
              placeholder="Search tags..."
              value={this.state.value}
              onChange={(event) => this.setState({ value: event.target.value })}
              onSelect={() => this.setState({ value: '', isOpen: false })}
              marginBottom={2}
            >
              <Combobox.Item index={0} value="lights">
                Lights
              </Combobox.Item>
              <Combobox.Item index={1} value="camera">
                Camera
              </Combobox.Item>
              <Combobox.Item index={2} value="audio">
                Audio
              </Combobox.Item>
              <Combobox.Item index={3} value="producer">
                Producer
              </Combobox.Item>
            </Combobox.Popover>
          </Collapse>
          <Card padding={2} spacing={1}>
            <Heading level={3}>Background Check</Heading>
            <StackView axis="horizontal" spacing={1}>
              {['Lights', 'Camera', 'Audio', 'Producer'].map((tag) => (
                <Badge key={tag} title={tag} />
              ))}
            </StackView>
          </Card>
        </Section>
      )
    }
  }
)
```