- React

## Examples

### Basic

    const BasicPanel = () => (
      <Panel>
        <PanelMain>
          <PanelMainBody>Main content</PanelMainBody>
        </PanelMain>
      </Panel>
    );

### Header

    const HeaderPanel = () => (
      <Panel>
        <PanelHeader>Header content</PanelHeader>
        <Divider />
        <PanelMain>
          <PanelMainBody>Main content</PanelMainBody>
        </PanelMain>
      </Panel>
    );

### Footer

    const FooterPanel = () => (
      <Panel>
        <PanelMain>
          <PanelMainBody>Main content</PanelMainBody>
        </PanelMain>
        <PanelFooter>Footer content</PanelFooter>
      </Panel>
    );

### Header and footer

    const HeaderFooterPanel = () => (
      <Panel>
        <PanelHeader>Header content</PanelHeader>
        <Divider />
        <PanelMain>
          <PanelMainBody>Main content</PanelMainBody>
        </PanelMain>
        <PanelFooter>Footer content</PanelFooter>
      </Panel>
    );

### No body

    const NoBodyPanel = () => (
      <Panel>
        <PanelMain>Main content</PanelMain>
      </Panel>
    );

### Raised

    const RaisedPanel = () => (
      <Panel variant="raised">
        <PanelMain>
          <PanelMainBody>Main content</PanelMainBody>
        </PanelMain>
      </Panel>
    );

### Bordered

    const BorderedPanel = () => (
      <Panel variant="bordered">
        <PanelMain>
          <PanelMainBody>Main content</PanelMainBody>
        </PanelMain>
      </Panel>
    );

### Secondary variant

    const PanelSecondaryVariant = () => (
      <Panel variant="secondary">
        <PanelMain>
          <PanelMainBody>Main content</PanelMainBody>
        </PanelMain>
      </Panel>
    );

### Scrollable

    const ScrollablePanel = () => (
      <Panel isScrollable>
        <PanelMain tabIndex={0}>
          <PanelMainBody>
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
          </PanelMainBody>
        </PanelMain>
      </Panel>
    );

### Scrollable with header and footer

    const ScrollableHeaderFooterPanel = () => (
      <Panel isScrollable>
        <PanelHeader>Header content</PanelHeader>
        <Divider />
        <PanelMain tabIndex={0}>
          <PanelMainBody>
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
            <br />
            <br />
            Main content
          </PanelMainBody>
        </PanelMain>
        <PanelFooter>Footer content</PanelFooter>
      </Panel>
    );

##
CSS variables