Docs

Back to component list

Viewport

A viewport is always as big as the browser window of the user.

By default, given content will be centered vertically and horizontally.

Supports background images.

NameDefault
children
node
backgroundImageId
string

image id to display as background image

horizontalAlign
string'center'

horizontal content alignment

verticalAlign
string'center'

vertical content alignment

colorSet
stringnull

Define a color set for this box

colors
object{}

Overwrite specific colors

Viewport

A viewport is always as big as the browser window of the user.

By default, given content will be centered vertically and horizontally.

Images

<Viewport>
<Section>

This content will be centered within an area, which has the exact height of your screen.
The `<Section />` wrapper will ensure the content is aligned to the main content column.

</Section>
</Viewport>
<Viewport colorSet="green">
<Section>

## Nec totas solitis

Some more content

</Section>
</Viewport>
<Viewport horizontalAlign="end" verticalAlign="end">

This content is horizontally and vertically aligned to the end.

<Image src="https://source.unsplash.com/random?2" width="200" />

</Viewport>


Back to component list