Content Web - Template Guide - Updated 11/8/2023

Sep 11, 2026

Guide for using template modules and CMS components on the National Grid US website, focused on how content fields are entered and how navigation features work. Covers overall template/module functionality, then details navigation patterns including utility toolbar, primary navigation bar, active-state styling, and level-based links for desktop and mobile. Includes guidance on mobile navigation behavior such as slide-out search, sign-in/profile handling, and the hamburger drawer structure for level 1–3 pages, plus sub-navigation in the left rail.

LanguageEnglish

CategoryPresentations

FormatPDF

Pages43

Reading Time15 min

AccessFree to download

Overview

Navigation

Utility Toolbar

Primary Navigation Toolbar

Level Links (Level 1-3)

Active State Indicators

Mobile Navigation

Sub-Navigation (Desktop Left Rail)

Homepage Template

General Content Template / Types of Webpage

Other Types of Webpage Elements: PDF/Image/Forms

Components

Services & Rebates Template

Standard SEO

Storm Mode & Alert Messaging

Content Web: Template Guide Overview The purpose of this guide is to outline the general use and functionality of the templates and modules for the National Grid US Website. This document describes the content management system (CMS) components for template modules and serves as a reference guide for how content can be entered into the module components. Table of Contents Navigation…………………………………………………………………………………………..……..2 Homepage Template ………………………………………………………………………………. 13 General Content Template / Types of Webpage.………………………………….. 17 Other types of Webpage Elements: PDF/Image/Forms….……………………..17 Components…..………………………………………………………………………………………...24 Services & Rebates Template…..………………………………………………………………34 Standard SEO …..………………………………………………………………………………………36 Storm Mode & Alert Messaging …..………………………………………………………….38 Updated 11/8/2023 Navigation Utility Toolbar Primary Nav Bar Our navigation scheme can cater for three levels of depth through a drop-down menu . This means that a user can access a large number of web pages just by using the navigation alone. This interface demonstrates the navigation links that are available to users throughout the pages of National Grid’s content website. The main navigation is broken out into two elements: Utility Toolbar and a Primary Navigation Bar. Navigation Utility Toolbar The toolbar at the top of the navigation represents the utility toolbar . From this toolbar, users have the option to view their selected location, access quick links to important pages throughout the site, and perform a global search of the site’s content. Selected Location The user’s selected region is displayed at the top left corner of the utility toolbar with a link to change it. Service Type Drop-Down The user’s service type (gas/electric) is displayed to the right of the selected region. The display of gas and/or electric is based on the user’s selected region. If Massachusetts is selected as location, the service type will be a drop-down input that allows the user to toggle between Quick Links & Global Search The Gas Emergencies, Power Outages, Our Company, Contact Us quick links provide easy access to important pages within the sites. The search icon, when selected, will open a global search bar that will slide out from the bottom of the utility the gas site and the electric site . toolbar. Can be updated by Content Web team. • The asset that determines the logo for all of the regional websites is located at /_regions/default • Logos located at: /Media Library/Logo/ . The user is able to toggle between the residential site and the business site using the home and business drop-down next to the service type. Selecting this drop-down opens a menu with a “For Your Home” option and “For Your Business” option . Navigation Primary Navigation Toolbar The bar shown below the utility toolbar represents the primary navigation bar . This navigation is unique to each regional website . In Crownpeak CMS, the assets to update each region are located updated at: /US Retail Web refresh/_Regions Level 1 Links The primary navigation bar displays the main sections (Level 1 pages) in the website. For each section, it gives users the option to view drop-down menus containing links to content pages around the site. Quick Links: It also features quick links to take them directly to the Pay Your Bill and Sign In / Register page. These links cannot be edited by the Content Web team. Level 2 and 3 Links Users can also click directly to each Level 2 sub-section landing pages or to their Level 3 children pages. Pages that are deeper than three levels are accessed via sub-navigation components in the left navigation rail. Active State indicators Current section and webpage are differentiated with styling. Navigation Mobile The interface shown here represents the primary navigation menu that will be used for the mobile version of the website . Similar t

FAQs

What is the purpose of the Content Web Template Guide?

It outlines the general use and functionality of template modules and CMS components for the National Grid US website, serving as a reference for how content can be entered into module components.

How does the desktop navigation structure work?

The navigation is split into a utility toolbar and a primary navigation bar. The primary bar provides level 1 section links with drop-down menus, and users can access level 2 and level 3 pages via direct links and deeper levels via sub-navigation components.

What are key differences in mobile navigation behavior?

Mobile navigation uses a utility toolbar plus a primary navigation bar. It keeps global search accessible via an icon that slides down, uses a hamburger drawer to expose level 1–3 links, and includes quick links such as Pay Your Bill at the bottom of the drawer while sign-in/profile actions update based on account state.

Sep 11, 2026

Uploaded by Lucas Martin