Header
Content
Footer
For pages with a limited amount of content, typically the footer would stack below the content — sitting unexpectedly high within the page.
The Page component provides a simple way to establish a more predictable layout — at a minimum placing the footer at the bottom of the screen, pushed beyond as the page content grows.
WITHOUT PAGE
Header
Content
Footer
WITH PAGE
Header
Content
Footer
For pages with dynamic content, it is recommended to place the footer out of view by setting the footerPosition prop to belowFold. This prevents the footer from popping in and out of view when the page content changes, e.g. toggling between a loading indicator and content.
Header
Content
Footer