import Content from '../Content'
import Div from '../Div'
import Span from '../typography/Span'
import Br from '../Br'
import { u } from '../../config/helpers'
import { Sandbox } from '@startupjs/docs'

# Content

Content used as a parent container for elements.

```jsx
import { Content } from '@startupjs/ui'
```

## Example

By default content has left and right paddings of `16px`.

```jsx example
const contentStyle = {
  backgroundColor: '#2962FF'
}
const divStyle = {
  height: u(25),
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Content style={contentStyle}>
    <Div style={divStyle}>
      <Span size='xl'>content</Span>
    </Div>
  </Content>
)
```

## Vertical paddings
Top and bottom paddings can be added by passing the `padding` property to component.

```jsx example
const contentStyle = {
  backgroundColor: '#2962FF'
}
const divStyle = {
  height: u(25),
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Content style={contentStyle} padding>
    <Div style={divStyle}>
      <Span size='xl'>content</Span>
    </Div>
  </Content>
)
```

## Full space

Content takes the `full` property, which gives it all the empty space on the main `flexbox` axis of the parent.

```jsx example
const divStyle = {
  height: u(25),
  backgroundColor: '#2962FF'
}
const contentStyle = {
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Div>
    <Div style={divStyle}>
      <Content style={contentStyle}>
        <Span size='xl'>Content without full</Span>
      </Content>
    </Div>
    <Br />
    <Div style={divStyle}>
      <Content style={contentStyle} full>
        <Span size='xl'>Content with full</Span>
      </Content>
    </Div>
  </Div>
)
```

## Max width

Content has limited max-width by default of `480px`, because we are making mobile first layout and can only go from smaller to larger screens by changing `width` property (possible values of property can be found in the `Sandbox` section at the bottom of the page). Also you can change the default width value for component by passing `defaultWidth` property in your `startupjs.config.js`. **We don't recommend to change the `defaultWidth` unnecessarily, because it is a more advanced setting that will change all your entire app.**

```jsx example
const contentStyle = {
  backgroundColor: '#2962FF'
}
const divStyle = {
  height: u(25),
  backgroundColor: '#00AED6',
  alignItems: 'center',
  justifyContent: 'center'
}
return (
  <Div>
    <Content
      padding
      style={contentStyle}
    >
      <Div style={divStyle}>
        <Span size='xl'>Mobile (default)</Span>
      </Div>
    </Content>
    <Br />
    <Content
      padding
      width='tablet'
      style={contentStyle}
    >
      <Div style={divStyle}>
        <Span size='xl'>Tablet</Span>
      </Div>
    </Content>
    <Br />
    <Content
      padding
      width='desktop'
      style={contentStyle}
    >
      <Div style={divStyle}>
        <Span size='xl'>Desktop</Span>
      </Div>
    </Content>
    <Br />
    <Content
      padding
      width='wide'
      style={contentStyle}
    >
      <Div style={divStyle}>
        <Span size='xl'>Full Width</Span>
      </Div>
    </Content>
  </Div>
)
```

## Sandbox

<Sandbox Component={Content} />