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
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.
Columns in the Currency Grid used to set content/component width.
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.
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
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.