Responsive, standard web page layouts help us create a straightforward and consistent experience on consumerfinance.gov for for all users, across devices.
The following three foundational page layouts are the building blocks of our site.
Landing pages provide an overview of a section and helps users situate themselves within the site and the subject matter. Users should be able to quickly skim section topics and select the category that interests them.
Landing pages exist for each of the five first level navigation sections as well as for second-level subsections as needed.
Standard content areas
The introduction space contains a short description to help orient users to the section and set expectations for what they will find deeper in the section. This may take the form of a hero or a text introduction.
This space is used to introduce users to the different topics, tools, resources, or journeys in the section. Standard formatting for each module within this area includes a title and short description with links or a call to action. The description should act as a prompt to action rather than presenting the “meat” of the topic. Depending on quantity and importance these modules may make use of illustration, buttons, links, well wrappers, etc. to establish the appropriate hierarchy. Users will navigate to deeper pages within the section via the modules in this area.
The sidebar space is typically used to share related, relevant, or recent content that applies to the section. Many different modules can live within a sidebar, they are typically repeatable modules that can can be used across multiple page types (examples: related XXXX, popular XXXX, recent XXXX, email sign up, etc.)
Browse
User goal: Skim specifics for the detail I need
Browse pages provide more specific topic or product overviews and information. Often these pages contain lists of documents or other resources within a filterable list, or descriptions of action steps or FAQ.
Users navigate between the browse pages within a subsection via the left side navigation list. If the content of a browse page requires further division into subpages that maintain the browse style, these subpages will also be listed in the left side navigation.
Standard content areas
The abbreviated breadcrumb shows the navigation path up to, but not including, the primary section landing page (i.e. About Us, Policy & Compliance).
Side navigation contains sibling browse pages or child sub-browse pages.
The introduction space contains a short, informative text description to help orient users. This area may also include a featured piece of content.
This space is used to provide an overview of specific documents, resources, guides, or tools within the section. Formatting of modules in this area can vary greatly, from a list of blog posts to body copy about a specific topic. Content sections and links here may act as a secondary means of navigating to pages also listed within the left side navigation, or a primary means of navigating to individual learn pages, such as a full blog post.
Optional content area
The page-specific pre-footer space is typically used to share related, relevant, or recent content that applies to that section. Many different modules can live within a sidebar, they are typically repeatable modules that can can be used across multiple page types (examples: related XXXX, popular XXXX, recent XXXX, email sign up, etc.)
Learn
User goal: Engage and understand specific content
Learn pages invite the user to engage with a specific tool or learn more comprehensive information about a topic. Examples include articles, reports, or interactive tools.
Standard content areas
The abbreviated breadcrumb shows the navigation path up to, but not including, the primary section landing page (i.e. About Us, Policy & Compliance).
The introduction space contains a short, informative description to help orient users to the detailed content that follows.
At the learn level this space will contain the most specific information on a topic. In most instances this is the terminal level of information. Content format can vary greatly from a block of body copy to a full-width interactive tool.
Optional content area
The sidebar space is typically used to share related, relevant, or recent content that applies to the section. Many different modules can live within a sidebar, they are typically repeatable modules that can can be used across multiple page types (examples: related XXXX, popular XXXX, recent XXXX, email sign up, etc.) If the learn page is not being used to display a full-width interactive tool, use of the sidebar to provide related, contextual information is strongly encouraged.
