components / Structure

Page

Width Properties

By default, pages have a max width of 1280px. This can be shrunk to 768px, or removed altogether.

Forcing a Minimum Width

By default, pages do not have a min width. A min width can be enabled on the Page's content to prevent the underlying components from being responsive, creating a horizontal scroll effect. The minimum width value is set to 1280px for default and wide Pages, and 768px for narrow Pages. This can be useful when page content is not useful to scale down, such as tables.

Margins

The spacing between the Page content and the rest of the UI can be removed. This is useful when designing for page background stylings (colors, separators).

Left Aligned

The content area of a page can also be left aligned.

Background Color

The background color for the page can be set either to neutral-10 (#FCFCFC, the default) or White/neutral-0 (#FFFFFF).

The page header is where the top content of a page is contained. It currently accepts most forms of content. For more indepth use cases, see the Page Header pattern.

The page footer is where the save and cancel action is contained for page level submission.

The page can include a Sidebar on the left side with consistent sizing. See the Sidebar docs for more information on using Sidebars.

Action Toolbar

Placed above the page header and content, the Action Toolbar provides a location for the Actions and Inputs components to filter, change, or update content and to take action on selected items.

When to not use this

Do not use this with Save action. We have established that pattern for saving content or form to be on the footer of the page.

Design considerations

To preserve visual hierarchy and to minimize vertical space used, use smaller size components, like Small Buttons, 24px Icons, Medium BodyText

Sticky position

Use a sticky positioning when the page length is longer than 2 viewport height, requiring users to scroll multiple times to view the content they need.

Responsiveness

When horizontal space is limited and the content of the Action Toolbar is overflowing, create a responsive design utilizing components such as an Action Menu to avoid horizontal scrolling and do not wrap it to next line.

Behavior

Utilizing ActionMenu

This example does not include responsiveness.

Panel

The Panel on a Page displays supplementary content of the Page or select item in the Page.

Position

Right Position

Left Position

Hide & Reveal

A Panel also has ability to hide and reveal itself. This is used to bring up supplementary content of a selected item on a page.

No Padding

Best Practices

  • Pages should contain at least the title of the page.

Importing

import { Page } from '@servicetitan/design-system';