The page is a container component for a full application screen comprising a header, content area, and footer.

Page – live example

When to Use

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

Anatomy

1. Header
   1. Home icon
   2. Title
   3. Button
2. Content
3. Footer (optional). The footer can float or be fixed at the bottom of the page.
   4. Button

Variants

The page can have a floating or fixed footer bar.

Behavior and Interaction

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.

Responsive Behavior

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.

Globalization and Localization

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.

Page in RTL mode – live example

Related Links