# Page

*Category:* Components
*Section:* Content
*Source:* https://uikit.developers.rio.cloud/#/components/page
*Captured:* 2026-04-27T14:58:03.621Z

## Page

### Example: A4

A4

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

#### React (tsx)

```tsx
import Page from '@rio-cloud/rio-uikit/components/page/Page';

import sampleShippingDocument from '../../../assets/shipping_list_sample.png';

const content = <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>A4</div>;

import { dummyTextLong } from '../../../utils/data';

export default () => (
    <div className='height-600 overflow-y-scroll padding-20'>
        <div className='display-grid place-items-center gap-20'>
            <Page width={600}>{content}</Page>

            <Page width={600}>
                <img
                    className='img-responsive'
                    src={sampleShippingDocument}
                    loading='lazy'
                    alt='sample shipment document'
                />
            </Page>

            <Page width={600}>
                <div className='padding-x-20'>
                    <h2>Lorem ipsum dolor</h2>
                    <p>{dummyTextLong}</p>
                </div>
            </Page>
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="height-600 overflow-y-scroll padding-20">
    <div class="display-grid place-items-center gap-20">
        <div class="Page portrait shadow-hard" style="width: 600px;">
            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">A4</div>
        </div>
        <div class="Page portrait shadow-hard" style="width: 600px;">
            <img class="img-responsive" src="https://uikit.developers.rio.cloud/assets/shipping_list_sample-iOPFy4Rq.png" loading="lazy" alt="sample shipment document">
        </div>
        <div class="Page portrait shadow-hard" style="width: 600px;">
            <div class="padding-x-20">
                <h2>Lorem ipsum dolor</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                    In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                    Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</p>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
| orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
| className | string | — | Additional classes to be set on the wrapper element |

### Example: Page 1

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

#### React (tsx)

```tsx
import Page from '@rio-cloud/rio-uikit/components/page/Page';

export default () => (
    <div className='padding-20 overflow-x-scroll'>
        <div className='display-inline-flex gap-20'>
            {Array.from({ length: 6 }, (_, index) => (
                <Page width={300} key={index}>
                    <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>
                        {`Page ${index + 1}`}
                    </div>
                </Page>
            ))}
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="padding-20 overflow-x-scroll">
    <div class="display-inline-flex gap-20">
        <div class="Page portrait shadow-hard" style="width: 300px;">
            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 1</div>
        </div>
        <div class="Page portrait shadow-hard" style="width: 300px;">
            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 2</div>
        </div>
        <div class="Page portrait shadow-hard" style="width: 300px;">
            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 3</div>
        </div>
        <div class="Page portrait shadow-hard" style="width: 300px;">
            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 4</div>
        </div>
        <div class="Page portrait shadow-hard" style="width: 300px;">
            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 5</div>
        </div>
        <div class="Page portrait shadow-hard" style="width: 300px;">
            <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Page 6</div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
| orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
| className | string | — | Additional classes to be set on the wrapper element |

### Example: Portrait

Portrait

Landscape

#### React (tsx)

```tsx
import Page from '@rio-cloud/rio-uikit/components/page/Page';

export default () => (
    <div className='display-grid grid-cols-2 place-items-center gap-20'>
        <Page width={210} border shadow={false}>
            <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>Portrait</div>
        </Page>
        <Page width={210} border shadow={false} orientation='landscape'>
            <div className='display-grid place-items-center height-100pct text-size-20 text-color-dark'>Landscape</div>
        </Page>
    </div>
);
```

#### HTML (html)

```html
<div class="display-grid grid-cols-2 place-items-center gap-20">
    <div class="Page portrait border border-width-2" style="width: 210px;">
        <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Portrait</div>
    </div>
    <div class="Page landscape border border-width-2" style="height: 210px;">
        <div class="display-grid place-items-center height-100pct text-size-20 text-color-dark">Landscape</div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| width | number | — | Defines the width in pixel of the page. In landscape mode, the width is set as height. The component uses internally the aspect-ratio of a standard DIN A4 page. Please make sure the element does not get stretched when using flexbox. |
| orientation | 'portrait' \| 'landscape' | 'portrait' | Defines the layout of the page |
| shadow | boolean | true | Defines to use a pre-defined shadow style. May be disabled on white background. |
| border | boolean | — | Defines to use a pre-defined border style. This may be used to render the page on a white background of as part of another element like a panel. |
| className | string | — | Additional classes to be set on the wrapper element |