[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"doc-seo-239294-105":3,"detail-sidebar-cat-1-en-105":81,"doc-detail-239294-en":126},{"code":4,"msg":5,"data":6},0,"ok",{"site_id":7,"language":8,"slug":9,"title":10,"keywords":11,"description":12,"schema_data":13,"social_meta":74,"head_meta":76,"extra_data":78,"updated_unix":80},105,"en","content-web-template-guide-updated-1182023","Content Web - Template Guide - Updated 11/8/2023","","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.",{"@graph":14,"@context":73},[15,34,56],{"@type":16,"itemListElement":17},"BreadcrumbList",[18,23,27,31],{"item":19,"name":20,"@type":21,"position":22},"https://docshare.wps.com","Home","ListItem",1,{"item":24,"name":25,"@type":21,"position":26},"https://docshare.wps.com/template/","Template",2,{"item":28,"name":29,"@type":21,"position":30},"https://docshare.wps.com/template/presentations/","Presentations",3,{"item":32,"name":10,"@type":21,"position":33},"https://docshare.wps.com/template/content-web-template-guide-updated-1182023/239294/",4,{"url":32,"name":10,"@type":35,"image":36,"author":41,"headline":10,"publisher":44,"fileFormat":47,"inLanguage":8,"description":12,"dateModified":48,"datePublished":49,"encodingFormat":47,"isAccessibleForFree":50,"interactionStatistic":51},"DigitalDocument",{"url":37,"@type":38,"width":39,"height":40},"https://docshare.wps.com/thumbnails/content-web-template-guide-updated-1182023/239294.png","ImageObject",442,249,{"name":42,"@type":43},"Lucas Martin","Person",{"url":19,"name":45,"@type":46},"DocShare","Organization","application/pdf","2026-10-20","2026-09-11",true,{"@type":52,"interactionType":53,"userInteractionCount":55},"InteractionCounter",{"@type":54},"ViewAction",14,{"@type":57,"mainEntity":58},"FAQPage",[59,65,69],{"name":60,"@type":61,"acceptedAnswer":62},"What is the purpose of the Content Web Template Guide?","Question",{"text":63,"@type":64},"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.","Answer",{"name":66,"@type":61,"acceptedAnswer":67},"How does the desktop navigation structure work?",{"text":68,"@type":64},"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.",{"name":70,"@type":61,"acceptedAnswer":71},"What are key differences in mobile navigation behavior?",{"text":72,"@type":64},"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.","https://schema.org",{"og:url":32,"og:type":75,"og:title":10,"og:site_name":45,"og:description":12},"article",{"robots":77,"canonical":32},"index,follow",{"doc_id":79,"site_id":7},239294,1791715978,{"code":4,"msg":82,"data":83},"success",[84,88,93,97,102,107,112,117,122],{"id":85,"doc_module":22,"doc_module_name":25,"category_name":29,"show_sort_weight":86,"slug":87},11,90,"presentations",{"id":89,"doc_module":22,"doc_module_name":25,"category_name":90,"show_sort_weight":91,"slug":92},12,"Resumes",80,"resumes",{"id":55,"doc_module":22,"doc_module_name":25,"category_name":94,"show_sort_weight":95,"slug":96},"Invoices",70,"invoices",{"id":98,"doc_module":22,"doc_module_name":25,"category_name":99,"show_sort_weight":100,"slug":101},15,"Posters",60,"posters",{"id":103,"doc_module":22,"doc_module_name":25,"category_name":104,"show_sort_weight":105,"slug":106},16,"Social Media",50,"social-media",{"id":108,"doc_module":22,"doc_module_name":25,"category_name":109,"show_sort_weight":110,"slug":111},17,"Forms",40,"forms",{"id":113,"doc_module":22,"doc_module_name":25,"category_name":114,"show_sort_weight":115,"slug":116},18,"Letters",30,"letters",{"id":118,"doc_module":22,"doc_module_name":25,"category_name":119,"show_sort_weight":120,"slug":121},21,"Paper Templates",5,"papers-templates",{"id":123,"doc_module":22,"doc_module_name":25,"category_name":124,"show_sort_weight":4,"slug":125},158,"General","general-158",{"code":4,"msg":82,"data":127},{"doc_id":79,"user_id":128,"nickname":42,"user_avatar":129,"doc_module":22,"category_id":85,"category_name":29,"doc_title":10,"doc_description":12,"doc_content":130,"file_id":131,"file_url":132,"file_type":133,"file_size":134,"view_count":55,"is_deleted":4,"is_public":22,"is_downloadable":22,"audit_status":22,"page_count":135,"language":136,"language_code":8,"site_id":7,"html_lang":8,"table_of_contents":137,"faqs":138,"seo_title":139,"seo_description":12,"update_tm":140,"read_time":98},8796095360427,"https://ap-avatar.wpscdn.com/davatar_994ba38a5ba835b3df7d355c54d3ed8d","Content Web: Template Guide  \nOverview  \nThe purpose of this guide is to outline the general use and functionality of the templates and modules for the National Grid US Website.  \nThis 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.  \nTable of Contents  \nNavigation…………………………………………………………………………………………..……..2  \nHomepage Template ………………………………………………………………………………. 13  \nGeneral Content Template / Types of Webpage.………………………………….. 17  \nOther types of Webpage Elements: PDF/Image/Forms….……………………..17  \nComponents…..………………………………………………………………………………………...24  \nServices & Rebates Template…..………………………………………………………………34  \nStandard SEO …..………………………………………………………………………………………36  \nStorm Mode & Alert Messaging …..………………………………………………………….38  \nUpdated 11/8/2023  \nNavigation  \nUtility Toolbar Primary Nav Bar  \nOur 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.  \nThe main navigation is broken out into two elements: Utility Toolbar and a Primary Navigation Bar.  \nNavigation  \nUtility Toolbar  \nThe 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.  \nSelected Location  \nThe user’s selected region is displayed at the top left corner of the utility toolbar with a link to change it.  \nService Type Drop-Down  \nThe 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  \nQuick Links & Global Search  \nThe 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  \nthe gas site and the electric site . toolbar.  \nCan be updated by Content Web team.  \n• The asset that determines the logo for all of the regional websites is located at /_regions/default  \n• Logos located at: /Media Library/Logo/ .  \nThe 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 .  \nNavigation  \nPrimary Navigation Toolbar  \nThe bar shown below the utility toolbar represents the primary navigation bar .  \nThis navigation is unique to each regional website .  \nIn Crownpeak CMS, the assets to update each region are located updated at: /US Retail Web refresh/_Regions  \nLevel 1 Links   \nThe 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.  \nQuick 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.  \nLevel 2 and 3 Links  \nUsers 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.  \nActive State indicators  \nCurrent section and webpage are differentiated with styling.  \nNavigation  \nMobile  \nThe interface shown here represents the primary navigation menu that will be used for the mobile version of the website . Similar t","cbCairQw7gJJdufh","https://ap.wps.com/l/cbCairQw7gJJdufh","pdf",1952012,43,"English","# Overview\n# Navigation\n## Utility Toolbar\n## Primary Navigation Toolbar\n## Level Links (Level 1-3)\n## Active State Indicators\n## Mobile Navigation\n## Sub-Navigation (Desktop Left Rail)\n# Homepage Template\n# General Content Template / Types of Webpage\n# Other Types of Webpage Elements: PDF/Image/Forms\n# Components\n# Services & Rebates Template\n# Standard SEO\n# Storm Mode & Alert Messaging","[{\"question\":\"What is the purpose of the Content Web Template Guide?\",\"answer\":\"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.\"},{\"question\":\"How does the desktop navigation structure work?\",\"answer\":\"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.\"},{\"question\":\"What are key differences in mobile navigation behavior?\",\"answer\":\"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.\"}]","Content Web - Template Guide - Updated 11/8/2023 | PDF",1789146861]