Holy grail layout

Place the main content between two side columns, below a header and above a footer.

Live preview Try the effect

WorkspaceOverview · Projects · Team

DashboardToday, Tuesday

Total visits12,480↗ 12.8%

Active users1,286↗ 8.2%

Complete tasks86↗ 16%

Recent projects Status

Website redesignIn progress

Order managementCompleted

Data visualizationIn progress

This demo explains the pattern. Adapt the styling and dimensions to your project.

What it is

Place the main content between two side columns, below a header and above a footer. This example illustrates an admin interface. Describe the target, trigger and final state when adapting it to your project.

When to use

Workspaces that need persistent navigation and supplementary information.

Related concepts

Unlike a single-sidebar layout, this pattern has a second supporting column.

Describe this effect

Output language

Use a header, footer, left navigation and right information panel around a flexible central content area.

Generated from the parameters · Add to a plan to edit

References

Specification and implementation reference

Definitions are editorial. Common and descriptive names are not necessarily standardized terms.