Tool Landing Layout

A Tool Landing layout is used to display any range of data that is most relevant for the user to see when first opening a tool. This layout is often referred to as a list page.

Tool landing pages commonly use a data table view.  However, these pages are intended to be flexible to accommodate the many use cases of our tools.  

Link to Core (In progress, doesn’t fully exist yet)

Link to Figma (Data table example)

Link to Figma Branch (List example)

Anatomy

A tool landing page layout will have predefined components within the header and a body segment that can accommodate flexible content.

Page Header

The tool landing page header always contains a page title, with additional optional elements as needed. Optional elements can be functional (navigational tabs, object level actions, settings icon) and/or visual/informational (pills, thumbnails, avatars, banners).

Breadcrumbs do not appear on the landing page header, since it is the first page the user lands on in a tool.

Actions used in the header should be performed on the object level. An action like ‘Edit’ should be used in the body content.  This behavior should be consistent across all of our page layouts.

Flexible Body Content

The body segment is considered the primary content area of the page. On a tool landing page, the body segment typically uses the full 12 column layout to accommodate larger amounts of data using a data table or list.

Common Core components that are used in the body of a tool landing page include but are not limited to:

• Cards
Data Tables
• Tiles
Titles
List

Reference the following additional guidelines when adding content to a tool landing page:

 Page Template
Content Flow
This is an example of a tool landing page using a card component with data table components as the body content

Responsiveness

The body segment should fill the width of the viewport, and the content should respond appropriately to keep the most important elements in view. Behavior will vary depending on what components are used.

The maximum padding between the content and the card edge is 60px. The minimum is 24px.

Specifications

Tool Landing Layout