The 3 main layout elements:

PageRoot

Placed at the root of a page, ensures the page always takes the full height of the browser window. Give it a background colors to ensure the correct background color fills the screen.

Section

Takes the full width of the screen. Usually takes a Container inside.

Container

Is the central column, within a single-column layout. Responsive by default.

Example:

Resize the browser to see the interplay between PageRoot, Section and Container:

(Note how the PageRoot takes the full screen height, the Section the full width, and the Container a constrained central position.)

1import { PageRoot, Section, Container } from '@tempoplatform/tpds/elements/layout'
2import { P } from '@tempoplatform/tpds/elements/typography'
3
4<PageRoot>
5  <Section>
6    <Container>
7      <P>Nullam id dolor id nibh ultricies vehicula ut id elit. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor.</P>
8    </Container>
9  </Section>
10</PageRoot>