Templates

Service Detail Page Content Page

The Service Detail template serves as a landing page for an individual service within an agency. This page can provide residents with information about a specific service such as how to apply, who is eligible, FAQs, and more.

Service Detail pages are located within the Services section of PA.gov, in each agency’s Services folder. On the live site, residents will see services grouped by topic, rather than by agency (ex. all services relating to licenses + certifications will be grouped together, to ease the search experience). Each agency owns their Service Detail pages for the services they provide.

Authors should use Agency Content Pages for any non-Services content.

Read Service Detail Best Practices guide

Read Agency Content Page guide

Overview

Template name: Service Detail Page

Required components in template:

Header Experience Fragment
Breadcrumb
Basic Hero
Table of Contents
Footer
Other components may be optionally added

Authors who can edit: Any

Creating a Service Detail page

1. Select where in the sitemap the new page should be created. Click through the site hierarchy to determine the location. Service Detail pages are always created as part of the Services folder.

2. Once in the Services folder, click on your agency, then click Create.

Site hierarchy leading to the Services pages

3. Click “Create,” then select “Page” from the dropdown.

4. From the “Create Page” template options, select “Service Detail Page,” then “Next.”

5. The author may now choose Page Properties for the newly created page. The list of required and optional Page Properties is above.

6. Click “Create.” The page is now part of the site hierarchy.

7. Click “Open” to edit the page immediately. Click “Done” to return to the site hierarchy.

Editing a Service Detail Page

1. Find the page in the sitemap. Click through the site hierarchy to find the location. In the example below, the page to edit is called CHIP. The page is in the CoPA PWP PA.gov site, in the English section, in the Services section, in the DHS Services folder. Select the checkbox.

Site hierarchy leading to the DHS Services section, with one of their Services pages checked off

2. Upon click, a menu appears at the top of the screen. Select “Edit.”

3. The page opens in the editing mode, and components can be added accordingly.

Other Tips

1. Read the Service Detail Best Practices guide for layout and copy advice.

2. The Service Detail page uses a two-column layout on desktop. On tablet/mobile, it truncates to one column.

3. Use Column Control to add a third column to the page on desktop. This is helpful if there are elements that should appear alongside others, such as required documents, important dates, or reminders.

a. Teasers or Text components may be the best options for the third column, as it is narrower than the main column.

4. The last parsys on the page (above the Footer) is full width, and includes a smaller subset of components to drag and drop. This can be used by authors to build the "Related Services and Information" full width section as seen in the example below. It is optional for authors to use this parsys.

a. This section is recommended to provide agency branding to the page.

Service Detail Page Template Examples

Figure A: Service Detail page using two-column layout, with one content column.

Figure B: Service Detail page using three-column layout, one main content column and one secondary content column.

Figure C: “Related Services and Information” section on the bottom of the page.