Information Details

A flexible template for informational content, including long pages with multiple sections, and those that need to highlight images and data visualizations.

Why use this content type?

While originally designed for long-form content, the Info Details content type works well for shorter pages, too.

You can opt for an Info Details template that displays data visualizations using Tableau. Info Details also feature more ways to display images, including across the whole width of a page, than do other content types.

Info Details pages typically are linked from parent pages, such as Service pages, Curated Lists, and Binders, to provide more in-depth information than can be included on those content types.

Alternatives to Info Details

Examples of when to use other content types for informational content:

If your content takes users through a complex, interrelated process, use a Guide
If you need to create a list of documents or other content, use a Curated List
You might also want to combine multiple Information Details into a Binder, where you can encourage users to read them in a specific order

Compare components available on Info Details, Organization, Promotional, and Service pages.

CMS Basics: Creating an Information Details page

Overview

Title

Be specific and use words people would use when searching for your content.

Short title

Optional. This field is used to shorten the full title of a page when displayed in a breadcrumb. First aim to shorten the actual page title if it’s long, but not so much that the title is no longer clear if someone comes directly to a page from a search engine.

Short description

Required. Briefly elaborate on the page title.

Banner image

Optional. Add a rectangular image that relates to the overarching theme of the page. It will appear on the righthand side of the page on a desktop and under the page title on a mobile device. Leave this field empty for a standard Information Details page header with no image.

If you choose to use an image, you can adjust the focal point to make sure the right part of the image remains in view on small screens (e.g. mobile phones). Once you’ve added an image, use the little white crosshair in the Banner image preview to pick the focus.

Image requirements: Minimum size is 600 x 450 pixels. Images using a different height to width ratio will be cropped. 256 MB limit. Allowed types: png, gif, jpg, jpeg.

Overview

Introductory content to appear before the table of contents. Optional, though either an Overview or content section is required.

Header Media

Your Header Media, which appears directly under the table of contents, can include 1 image, an iFrame, or a video .

Adding images

If you choose an image for your header media option, it will display at 1600 pixels wide. This is the same width as the Organization Page’s banner, which means you could select images from the Mass.gov Image Library listed under Organization page banners. Please note that the display will adapt to the height of your image — there’s currently no limit — so you’ll want to preview the page to ensure there’s not significance image distortion. A good place to begin might be 1600 x 400 pixels.

Adding iFrames

An iFrame is a page-inside-a-page: One source is “piped in” to another source.

On an Information Details page, iFrames will display at full-width. If you need to use an iFrame to add a large data visualization or map to your content, the Information Details template is a good choice. Here’s what an iFrame looks like:

To add an iFrame, you’ll need a URL from the source you want to embed in the page. This URL must be from a source that Mass.gov supports and is compatible with, such as Google docs or YouTube. Here’s a list of domains that you can use (you must be logged in to the CMS to view).

To add an iFrame:

Click “Add iFrame”
Add your iFrame’s URL to URL
In the administrative title, say what your iFrame shows. This will only be visible to other authors.
You also need to enter text in title for accessibility. To do this, imagine what a user who experiences the internet through text read aloud would require to understand what the iFrame shows. Learn more about titling for screenreaders.
Enter a height. There are a few options for height; choosing an option for dynamic height is recommended. However, if your iFrame is not in the iFrame-resizer library and you are not able to add the provided code to the source, it's recommended that you use the Aspect ratio option.

Important: If the content you want users to access is large or requires a great deal of interaction, it is sometimes better to link directly to it. There are limits to how responsive iFrames can be.

Additionally, you should always try out your iFramed page on a mobile device to get a sense of the audience’s experience. You may learn that an iFrame is not a good solution, especially if lots of your traffic comes from mobile devices.

Adding Videos

You can also add videos that are hosted on YouTube or Vimeo.

Select "Add Video"
Select “Add new file” (or "Add existing file" if you've previously uploaded the video. If this is the case, skip step 4.)
Give your video a title in media name
Paste the URL of your video into video URL
If you add content into transcript and video description, Mass.gov will create a link that to a page with your video and this content

Date published and updated

Optional. Lets readers know when a page first appeared and when it was last updated.

Page template

The page template field has 2 options:

None/Information details: “None” is the default value. Once you draft a page and save it, this field will change to “Information details.” Most Information Details pages should use this template.
Visual story: This is designed for pages that focus on visuals, with short pieces of text supporting a story told through images or data visualizations. This is not recommended for text-heavy pages. The wider layout can make it difficult to read large blocks of text.

If you choose the visual story template, the content will stretch the full width of the page. The right rail section that typically contains contact information and related links will disappear. If you add contact information and related links to an Information Details page with the visual story template, they will appear at the bottom of the page on a desktop view.

Hide table of contents

You can select this checkbox to choose to hide the table of contents from your page. A table of contents otherwise appears by default if your page has 3 or more sections.

We recommend using a table of contents in most cases, as it makes it easier to scan the page.

You might consider hiding the table of contents if your page is brief or its sections are very short. In this case, the page might be easier to use without the table of contents.

Parent page

These connections, displayed in the form of breadcrumbs (i.e., links) above the page title, will help Mass.gov visitors find their way to relevant information regardless of where they start on the site.

The Mass.gov team prepopulated the field based on an analysis of which child pages belong to which parent pages. Each child page can be assigned only 1 parent, or higher level page.

The required Parent page field appears on all public-facing content types and it powers the breadcrumb-based navigation system.

Organization(s)

You’ll find the Organization(s) field at the bottom of the first tab in every Mass.gov content type, and in documents. This field tells Mass.gov ’s search which pages belong to which organization. Making sure your Organization field is filled out correctly will help users who land on your content find their way to your Organization Page.

Language

English is chosen by default, but you can choose another language via the dropdown or make a ServiceNow request if the language you need isn't in the dropdown.

Intended audience

This field isn’t being used yet, so there’s no need to fill it in.

Labels

Labels are optional, but can be used to group content and documents for searching within the CMS or to automate the process of creating a Curated List. Start typing in the Labels field to choose an existing label or add a new one by entering it directly.

Be sure to create specific labels: the label field is shared across the whole site; your label should be unique and identifiable to prevent overlap with others.

Collections

Optional. Most content will not be in a Collection. Only add content to a collection if the collection creator has approved it. In that case, select any collections, topics, and subtopics for this content. Learn more about collections. If you later need to remove a page from a Collection, go back into the page and uncheck the box and select Save.

Content

Sections

Either 1 Section is required, or you must fill out the Overview field under the "Overview" tab.

You can have up to 26 sections, though we recommend against going that high since your page will become very long. Also, a maximum of 10 section headers will appear in the table of contents.

Heading

Your page may include 1 or more sections. If you add a third section, then a table of contents will automatically be created and appear near the top of the page. Whatever you put in the heading field will appear in the table of contents.

While you must fill out the heading field, you can choose to hide this heading if Section content has its own heading. Including both headings could be redundant. Check the box under the heading field if you want to hide the heading.

Section content

Within each section, you’ll have several tools to help you present content. Select any of the following buttons under the Content field to add information:

iFrame
Image
Pull Quote
Rich text editor
Stat
Video
Caspio data page
Tableau visualization
CSV table

You can add an iFrame, image, or video using the same steps described above. With images, you'll be able to wrap text around them to help the page content flow better.

Callout links display as light blue rectangles in which you can feature brief, clickable text. Up to 3 Callout Links will display horizontally in a desktop view, and they will appear stacked in a mobile view. You can display as many Callout Links as you like, though we suggest not overwhelming visitors with too many within a section.

The "Treatments for COVID-19" page uses Callout links:

Pull quotes “pull out” a section of text to emphasize it. You’ve probably seen this in news writing. Pull quotes underscore the point of your content, and they help visually break up long sections of text.

You can also add a rich text section — or a block of formatted text.

Stats also call out important information and allow you to visually break up content. When you add a stat, you’ll be given the option to align it right or left. If you turn on the Wrapping option, the following section of rich text or multimedia content will wrap around the stat:

Card groups display as vertical gray boxes that include a clickable title and a rich text field in which you can include plain text, clickable links, or some combination of the 2.

Add a data page using the Caspio tool (reach out to us via ServiceNow for more on this).

Tableau visualizations with short pieces of text can be included on Information Details pages within the visual story subtype. This layout provides more room for large Tableau visualizations and text wrapping. Learn more about how to add a Tableau visualization and wrap text around it.

CSV tables offer filtering, sorting, searching, and pagination. Larger tables can be collapsed upon initial view and expanded by Mass.gov visitors. Data provided via the CSV file can be updated as needed.

Authors can customize their tables in a number of ways, including by centering the data under column headings.

Hint: You may see blank columns and rows in your CSV file. It's helpful to at first select empty columns on the right, then click delete and select a couple of hundred empty rows below your data, and click delete. Then upload the CSV into the CMS.

Additional resources

Optional. Links to Mass.gov or external pages.

Downloads

Optional. Links to documents or other files.

Contact

In the contact field you can add a Contact Information or Person item that people can contact for more information about your service. Enter the name of the Contact or Person item and it will automatically populate in the field's dropdown menu.

In the related links fields, you may link up to 5 Mass.gov or external pages that visitors to your content might also be looking for.

Additional info

Footnotes

A rich text editor in which to include footnotes that will appear at the bottom of the page.

Image credit(s)

Credit source(s) for images used on this page. Credit(s) will appear at bottom of the page.

Managing and moving blocks of content

You might find that you need to move sections or chunks of content around. We find it most helpful to use the show row weights feature when ordering multiple sections of content, in order to keep everything organized.