> For the complete documentation index, see [llms.txt](https://dormakaba-digital.gitbook.io/reactnative-visual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dormakaba-digital.gitbook.io/reactnative-visual/components/layout-page-row-col.md).

# Page, Row, Col

The layout component `Page` acts as the default container for a page (setting background color and padding).\
\
`Row` and `Col` enable flex layouts for devices having with > 600.

## Preview

![Ipad Air 2 - landscape](https://3422846761-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGP0U4aBj2zuNdsU1Qu%2F-LGy4YxiZ3f2xk-5j86J%2F-LGy6KzMs_cJFStksX6J%2Flayout.png?alt=media\&token=e4c7e702-1ea9-4854-b15c-83487e8d9ec7)

## Code

```jsx
import { Page, Row, Col, H1, P } from '@dormakaba/digital-reactnative-visual'

<Page>
  <Row>
    <Col>
      <Card>
        <H1>Typography H1</H1>
        <P>Lorem ipsum...</P>
        <P>Lorem ipsum...</P>
      </Card>
    </Col>
    <Col flex={2}>
      <Card>
        <H1>Typography H1</H1>
        <P>Lorem ipsum...</P>
        <P>Lorem ipsum...</P>
      </Card>
    </Col>
  </Row>
</Page>
```

## Props

### Page

| **Name** | **Type** | **Description**                            |
| -------- | -------- | ------------------------------------------ |
| noScoll  | boolean  | use a regular View instead of a scrollview |
| styles   | object   | styles to override                         |

### Row

| **Name** | **Type** | **Description** |
| -------- | -------- | --------------- |
|          |          |                 |

### Col

| **Name** | **Type** | **Description**                                                                             |
| -------- | -------- | ------------------------------------------------------------------------------------------- |
| flex     | integer  | flex size (relative size compared to other col 1 -> size 2 will be double of column 1, ...) |