Skip to content

Layout Templates

Overview

A layout is a structural template that supports consistency across experiences by standardizing how content should flow across grids, spacing, and sections.

We use Currency Layout Templates as starting points because they are convenient and fast, systematized and optimized for their use cases. They remove the need for Nerds to recreate the same design over and over again; they only need to fill in the critical details. Layout Templates also help to represent brand guidelines and increase overall product consistency.

Glossary of terms

Template

A preset layout for a page or screen, used so that the page design does not have to be recreated each time it is used.

Grid Unit

Columns in the Currency Grid used to set content/component width.

Inset

Spacing between global elements like Navigation and page content.

Vertical divisions of page content containing a Section Title and section content in the form of Columns and/or Tiles.

Section content divided into variable grid-unit width containers.

Section content divided into equal grid-unit width containers.

Anatomy

Leveraging the Currency Grid and Spacing Units, Layout Templates are generally left-aligned with standardized spacing outside the content area and between sections; but flexible spacing within sections themselves.

Just as how the Currency Grid changes in number of grid-units between desktop and mobile breakpoints, Layout Template spacing and content overflow logic change appropriate to viewport size.

Layout Templates provide sections in a recommended order and options for handling responsive content across desktop and mobile viewports.

Standardized spacing in layout templates

Options for handling responsive content

Layout templates

Before utilizing a layout template component, review these guidelines:

  • Know your use case. Understand how the information on the page will be used.

  • Prioritize your content. Organize your content to highlight the most important information.

  • Group related content together. Make it efficient for users to work with the content.

All layout templates have suggested component(s) nested within and provide flexibility to modify or remove placeholder content, add additional components, and create bespoke sections.

Template A: Hubs and Dashboards

Use this layout as a starting point for top-level pages that serve primarily as gateways to deeper content. It’s characterized by its use of ContentPageHeader at the top, followed by Tiles, and flexibility for other modular content as needed thereafter.

Template B: Roundups and Reviews

Use this layout as a starting point for pages that group related products and reviews together. It is characterized by its use of ContentPageHeader at the top followed by Universal Product Cards.

Template C: Calculators

Use this layout as a starting point for our myriad calculators. It is characterized by an interactive calculator at the top followed by calculated results and related content.

Template D: Articles

Use this layout as a starting point for longform content (generally, financial articles). It is characterized by its use of ContentPageHeader at the top, followed by article imagery and content. It may have sidebar content that is visible only on Desktop (excluded on Mobile).

Template E: Comparisons

Use this layout as a starting point for pages comparing different financial products side-by-side. It is characterized by 3 Tiles on Desktop and 2 Scrolling Tiles on Mobile.