You are currently on Anvil1, which is now in maintenance mode. Visit Anvil2 to get the latest version of the design system.
patterns / null

Page Layout

Overview

Having a consistent place for navigation and similar elements is one of the key nature of good UI design. These page layouts show guidelines for element positioning to support different use cases and include examples and details to stay consistent with other pages.

Use Cases

Use Case
Option(s)
When adding a large data set to a page
When adding a small data set that is primarily visual
Configuration of features

Table Page

A table is one of the most complex objects that can live on a page. It can have infinite combinations of features which makes putting it in a page with consistency challenging. Below are our guidelines to achieve consistency for page with a table.

Default

Commonly used layout for most pages that contains table.

Wide

Used when table requires additional space on the page.


Card Page

A card page is used to show a smaller data set that is primarily visual, such as displaying images of an item.

Default

Settings Page

Default

Single Save

Use when bulk saving is required on page level.


Anatomy of a Page

The screen of a page is built through several Anvil composition components. Components marked as deprecated, such as the Grid and Container, are not typically apart of building a page.

Frame

The Frame provides the technical structure to the application. It holds the various sub-components of a particular page.

Page

The Page is the outer wrapper for a screen. It provides the background color and width of the page's main content.

The Sidebar is an optional configuration on the left side of the Page. Content inside it is usually through the Side Nav.

Layout

The Layout provides the building blocks of individual pages. Layouts control basic column configurations of content.


Best Practices

  • Table placement should be towards the bottom of the viewport if possible.
  • Be consistent with sibling page content widths and additional elements on the page.
  • Use the same layout width on the entire page page for better alignment and consistency.
  • If secondary navigation is required, consider using tabs.