> 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](/files/-LGy6KzMs_cJFStksX6J)

## 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, ...) |