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.  

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

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.

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

• Lists vs Tables