Nav open / close arrow

Standard Page Layout

Fabric's components and guidelines were designed specifically with Alation's data catalog structure in mind. These page layout guidelines may not be applicable outside of Alation's product suite.

Pages in Alation's data catalog share a common basic layout, with minor differences between them depending on the content.

All pages must have:

  • Page Header in the top-left
  • Page content area, in a one or two-column layout

Many pages also have:

  • Page actions in the top-right
  • Tabs (horizontal and/or vertical)
  • Breadcrumbs above the page header

Column Layouts

The content area of every page should conform to a one-column or two-column layout.

When present, the right column is a fixed width (180px) and the main column scales to fit the available space within the window. As a result, only components with very predictable structures and content should ever be placed within the right column in a two-column layout.

Sections

All information within the page content area is organized into sections (and sub-sections), each with a UIHeader at the top of the section.

Sections are almost always full-width within the column layout of the page. However, when displaying narrow content within the main column, the main column can be horizontally split into two equal columns. Subsequent sections resume the full-width sizing.

Custom Fields & Page Template Customization

Sections on a page can be arranged either standard out-of-the-box layout determined by Alation, or through end user admin customization of page templates and custom fields. Not all pages can be customized, but many object pages can be. This should be considered when designing for customizable pages, as the order and layout of content can't always be known by Alation.

Spacing

Fabric has informal "space units" of 4px.

All layouts should be designed with integer multiples of space units, except in special circumstances.

Exceptions:

  • Spacing of .5 space units (2px) may be used within Fabric components.
  • Fine-tuned spacing and layout adjustments may be done by single pixels when doing detailed layout adjustments, such as text baseline alignment.

Spacing Between Elements

This is an inconclusive list of standard spacing between elements. Always check the built-in padding/margin on Fabric components before adding extra spacing. Many components have built-in spacing to speed development and ensure consistency across the product.

  • 16px between tabs (when present) and page content
  • 24px between content sections within columns
  • 12px between section headers and section body text
  • 20px above & below buttons
  • 12px between buttons

Last Updated

Sep 13, 2019