<commit_before>Use a `Panel` to contain content that has a logical grouping. Panels always have either a `header` or a `title`.

Set the `title` or `header` prop to give a name to the panel. Use whichever is more appropriate for your application.

```jsx harmony
//title=Panel with title
<div className="bg-neutral-8 pal">
  <Panel {...{title:'Domains'}}>
    These are the domains.
  </Panel>
</div>
```

```jsx harmony
//title=Panel with header
<div className="bg-neutral-8 pal">
  <Panel {...{header: 'Domains'}}>
    These are the domains.
  </Panel>
</div>
```

Use the footer for information that does not belong in the panel body.

```jsx harmony
//title=Panel with header and footer
<div className="bg-neutral-8 pal">
  <Panel {...{header: 'Domains', footer: <a href="#">Click here for more info</a>}}>
    These are the domains.
  </Panel>
</div>
```

//noToolbar has associated calls-to-action, set the `titleCols` or `headerCols` prop to include buttons to the right of the panel name.

Because the panel is built on the `Grid` component, these buttons should be wrapped in `FlexCol` components.

```jsx harmony
//title=Panel with call-to-action in title
<div className="bg-neutral-8 pal">
  <Panel {...{
    title:'Domains',
    titleCols: [<FlexCol fixed><PrimaryButton>Add Domain</PrimaryButton></FlexCol>]
  }}>
    These are the domains.
  </Panel>
</div>
```

When including a button in a panel header, make it small to keep the panel header size the same.

```jsx harmony
//title=Panel with call-to-action in header
<div className="bg-neutral-8 pal">
  <Panel {...{
    header:'Domains',
    headerCols: [<FlexCol fixed><PrimaryButton small>Add Domain</PrimaryButton></FlexCol>]
  }}>
    These are the domains.
  </Panel>
</div>
```

//noToolbar has content loading, set the `loading` prop to add a loading indicator to the top of the panel body.

```jsx harmony
//title=Panel with loading animation
<div className="bg-neutral-8 pal">
  <Panel loading={true} title="Apps">
    Loading apps...
  </Panel>
</div>
```

When using multiple panels that are related, the first panel should have a title that names the grouping. Each panel header should name its subgroups.

```jsx harmony
//title=Multiple related panels
<div className="bg-neutral-8 pal">
  <Panel {...{title: 'Zoo animals', header: 'Mammals'}}>
    monkey, mouse
  </Panel>
  <Panel {...{header: 'Reptiles', className: 'mtxxl'}}>
    alligator, snake
  </Panel>
</div>
```<commit_msg>Fix typos in Panel usage page<commit_after>Use a `Panel` to contain content that has a logical grouping. Panels always have either a `header` or a `title`.

Set the `title` or `header` prop to give a name to the panel. Use whichever is more appropriate for your application.

```jsx harmony
//title=Panel with title
<div className="bg-neutral-8 pal">
  <Panel {...{title:'Domains'}}>
    These are the domains.
  </Panel>
</div>
```

```jsx harmony
//title=Panel with header
<div className="bg-neutral-8 pal">
  <Panel {...{header: 'Domains'}}>
    These are the domains.
  </Panel>
</div>
```

Use the footer for information that does not belong in the panel body.

```jsx harmony
//title=Panel with header and footer
<div className="bg-neutral-8 pal">
  <Panel {...{header: 'Domains', footer: <a href="#">Click here for more info</a>}}>
    These are the domains.
  </Panel>
</div>
```

When the panel has associated calls-to-action, set the `titleCols` or `headerCols` prop to include buttons to the right of the panel name.

Because the panel is built on the `Grid` component, these buttons should be wrapped in `FlexCol` components.

```jsx harmony
//title=Panel with call-to-action in title
<div className="bg-neutral-8 pal">
  <Panel {...{
    title:'Domains',
    titleCols: [<FlexCol fixed><PrimaryButton>Add Domain</PrimaryButton></FlexCol>]
  }}>
    These are the domains.
  </Panel>
</div>
```

When including a button in a panel header, make it small to keep the panel header size the same.

```jsx harmony
//title=Panel with call-to-action in header
<div className="bg-neutral-8 pal">
  <Panel {...{
    header:'Domains',
    headerCols: [<FlexCol fixed><PrimaryButton small>Add Domain</PrimaryButton></FlexCol>]
  }}>
    These are the domains.
  </Panel>
</div>
```

When the panel has content loading, set the `loading` prop to add a loading indicator to the top of the panel body.

```jsx harmony
//title=Panel with loading animation
<div className="bg-neutral-8 pal">
  <Panel loading={true} title="Apps">
    Loading apps...
  </Panel>
</div>
```

When using multiple panels that are related, the first panel should have a title that names the grouping. Each panel header should name its subgroups.

```jsx harmony
//title=Multiple related panels
<div className="bg-neutral-8 pal">
  <Panel {...{title: 'Zoo animals', header: 'Mammals'}}>
    monkey, mouse
  </Panel>
  <Panel {...{header: 'Reptiles', className: 'mtxxl'}}>
    alligator, snake
  </Panel>
</div>
```
{'fraction_non_alphanumeric': 0.1425686591276252, 'fraction_numerical': 0.002827140549273021, 'mean_word_length': 3.8558823529411765, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 83, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4419499', 'n_tokens_mistral': 1591, 'n_tokens_neox': 1508, 'n_words': 611}