Page
Page patterns provide example layouts to meet common user goals. They help to speed up design and development by providing a starting point for new application pages.
Anatomy
- 1 Page Header
- 2 Panels
- 3 Tile
The Page Header provides context, navigation, and actions that relate to the content on the page.
Panels establish the basic structure of a page. Use them to create sections to arrange menus, sidebars, and main content areas to display larger amounts of data.
Use Tiles to display the most important part(s) of a page — e.g. charts, interactive data tables and so on.
Usage
The starting point for any page is a Page Header with a Contrast Panel below.
When you need distinct areas in the layout, use Panels to structure the page. Be aware that Panels must always serve a purpose. Do not use empty Panels just to create whitespace.
To direct the users’ attention to the main content of the page, choose a Tile as its container. However, if the page’s main content is a large data set and you need to be space-efficient, putting it on a Panel can be the better choice.
Tile or Panel
Use the following table as a guide to choose between Panel and Tile.
| Purpose | Tile | Panel |
|---|---|---|
| Create relation, separation | Yes | Yes |
| Define the focus of a page | Yes | No |
| Use all available space of a page to display large data sets | No | Yes |
| Allow users to define the size and position | Optional | No |
Layout
Laying out the Page Header
The Page Header is always on top of the page. It spans the width of the page. There is no space between the Page Header and any adjacent Panel.
Laying out Panels
A Panel gravitates toward the edges of its parent element.
It connects seamlessly to the edges of the page and other Panels. There should be no space between Panels or a Panel and the parent element’s bounds.
From the edge where the Panel is placed, it stretches to fill the parent element in at least one direction. It only stops once it has connected to another Panel or the edges of its parent element.
In the other direction, the Panel often has a relative size, a fixed size, or a size that depends on its contents. To learn more, see the Panel pattern page.
Dos and Don’ts
Laying out Tiles
A Tile’s parent element must always be a Contrast Panel.
Tiles can create a variety of layouts. They can stack in a single column, build multiple columns, or form a grid.
The default spacing between Tiles is 24px / s-30. They always maintain a minimum distance of at least 8px / s-10. Even spacing between Tiles is ideal, but Tiles’ spacing can grow or shrink, if it clarifies the layout. Tiles follow the guidelines of Atlas’ spacing system.
The size of Tiles is frequently defined by their contents. For example, a Tile can have a relative width, a fixed width, or grow as wide as its parent element allows — while its height matches its content.
Constrained widths
If the user is supposed to read a lot of text or perform a linear task like filling out a form, a Tile layout can have a narrow maximum-width. 640px is a good starting point for a text-heavy Tile layout.
By default, Tile layouts are constrained to a maximum width of 1280px. This prevents information from being stretched out too far across the screen.
Tile layouts with constrained widths are always centered horizontally within their parent element.
Full widths
Tile layouts can also take advantage of all available space, but this is reserved for special use cases like Tile grids and dashboards.
Use the table below as a quick reference for Tile layout widths.
| Purpose | Width | Placement |
|---|---|---|
| Large amount of text, linear tasks, forms | 640px | Centered horizontally |
| Lists, tables with a fixed amount of columns | 1280px | Centered horizontally |
| Grids, dashboards, tables with a dynamic amount of columns | Full | Edge-to-edge |
Dos and Don’ts
To learn more, see the Tile pattern page.
Behavior
Overflow and Scroll
Use as few separate scrollable areas as possible. Ideally, the Contrast Panel below the Page Header should be the only scroll area on the page.
Choose vertical scrolling over horizontal scrolling as this matches the convention on most websites.
If you are required to build complex pages with multiple scrollable areas, separate them clearly, stick to one scroll direction only, and don’t nest scroll areas within other scroll areas.
Dos and Don’ts
Resizing
Atlas’ page layouts support small notebooks and big desktop screens. We do not optimize for smartphone screens or touch input.
A good starting point for the page layout is a reasonably small screen: 920px by 640px. Keep the page usable at that size, but accept that users might need to scroll more than they would need to on a bigger screen. Think about how the layout should change on bigger screens.
Try to keep key information and call-to-actions visible within the initial viewport, i.e. users should not need to scroll to see them. Consider minimum and maximum sizes for all sections in your layout. Use fixed Panels like headers or footers when they make sense.
Dos and Don’ts
Examples
info
Soon, you'll find examples of common page layouts here.