---
name: Pane
menu: Components
route: /components/pane
---

import { Pane } from './';
import { Grid } from '../Grid';
import { Typography } from '../Typography';
import { Playground } from 'docz';

# Pane

The `<Pane/>` component.

## Import

```js
import { Pane } from '@firstclasspostcodes/sw13';
// or
import { Pane } from '@firstclasspostcodes/sw13/lib/components/Pane';
```

## Spacing

The `<Pane/>` component has several ways to define flexible margins and padding through the `spacing={}` property.

You can specify combinatory paddings and margins with optional breakpoints, see the example below:

```js
const spacing = {
  // apply margin vertically (y axis)
  my: {
    // spacing 2 @ sm and 3 @ md breakpoints
    sm: 2,
    md: 3,
  },
  // apply unit 4 padding to all sides 
  p: 4,
  // override padding-bottom with unit 1 @ xs breakpoint
  pb: {
    xs: 1
  }
}
```

## Example

<Playground>
  <Grid component={Pane} spacing={{ m: 4 }} halign="center" valign="center">
    <Grid.Unit radius={3} background="blue" hue={0} component={Pane} spacing={{ p: { md: 4 } }} size={1 / 2}>
      <Typography size={0} color="blue">I'm text inside a pane</Typography>
    </Grid.Unit>
  </Grid>
</Playground>