Use the page as a base for any screen you need for your application.

Page with floating footer bar

Page with fixed footer bar

The page itself has no specific interactions. All interactions belong to the components within the page container and depend on the application use case.

For details, see the guidelines for the individual components, such as the button.

Example: Using a button in the header to navigate between pages

The page offers considerable freedom and flexibility and the page header and the footer are designed to adapt automatically to small, medium, and large screen sizes.

• The title truncates if needed.
• The actions in the header and in the footer should stay as long as possible but when the space is not enough, they should transform to an overflow menu from right to left.
• If a priority is set to the actions, the highest priority button is the last to move to the overflow menu.
• It is also possible to assign one button never to move to the overflow menu.

Letterboxing is used to limit the width of the content area to 1280 px. This prevents the app content from becoming too “stretched” on wide screens, and optimises readability. Letterboxing can be used if the use case requires it. However, most business apps offer so much content that the page is typically shown across the entire screen, without letterboxing.

The page supports both cozy and compact mode.

Toolbar actions move to an overflow menu if there is not enough space

When designing an application, have in mind that this component also can be used with languages that use right-to-left direction for writing and reading. In this case the UI should be mirrored in order to be more convenient for the users to interact with it.

https://www.sap.com/design-system/live-examples/Page/page_LE_RTL.html

Page in RTL mode – live example