The Information Details page is designed for long, complex content. You’ll be able to add more images, media, and customization than on other content types. It also supports long form content with a table of contents.
Since the Mass.gov CMS offers several long-form content types, it might help to understand how Information Details fit in.
If your content takes users through a complex, interrelated process, use a Guide
If you need to create a list of something, use a Curated List
If you want to include full width images, data visualizations, or iFrames use an Information Detail
If you need to publish research or a long form explanation of a single subject, use an Information Detail
You might also want to combine multiple Information Details into a Binder, where you can encourage users to read them in a specific order
The best place to link Information Details are:
In the What you need to know section or Eligibility Information sections of a Service Page
In a Binder
In a Curated List
The title and short description are the first things your audience sees. In fact, they might see them before they get to the page: If they’re coming from Google, the title is what will draw them to the page. It’s important that these are easy to read and use plain language.
Your header can include an image, iFrame, or a video — but only one at a time. To switch from one header media type to another, click the “remove” button, and then the “confirm removal” button.
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. Please note that the display will adapt to the height of your image — there’s currently no limit. A good place to begin might be 1600 x 400 pixels.
An iFrame is a page-inside-a-page. You can think of it like the picture-in-picture option on your television: One source is “piped in” to another source.
On an Information Detail, iFrames will display at full-width. By contrast, iFrames on a Service Detail stop short of the right side of the page to make room for Contact Information and related links. If you need to use an iFrame to add a large data visualization or map to your content, the Information Detail might be a good choice. Here’s what an iFrame looks like on an Information Detail:
To add an iFrame to your Information Detail, 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 (must be logged in 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 need to understand what the iFrame shows. Learn more about iFrames and accessibility.
Enter a Height. Often, you will need to save a draft, review it, and adjust the height. Trial-and-error is the best method for picking the right height.
Additionally, you should always try out your iFramed page on a mobile device to get a sense of the user’s experience. You may learn that an iFrame is not a good solution, especially if lots of your traffic comes from mobile devices.
You can also add videos that are hosted on YouTube or Vimeo to your Information Detail pages.
Click “Add Video”
Click “Add new file” (Click "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
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.
This is optional, however it is very helpful. Add one or more labels to be used to generate a list of pages with that label or combination of labels. Start typing to choose an existing label or add a new one by entering it directly.
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. This field also powers the "Offered by" relationship indicator that displays at the top of all Mass.gov pages. "Offered by" displays on the top right if there is a "Part of" relationship indicator on the left in a desktop view, or on the top left if there is no "Part of" link. On a smaller screen, "Offered by" appears directly under "Part of" at the top of the page. Making sure your Organization field is filled out correctly will help users who land on your content find their way to your Organization Page.
Choose the audience this content is intended for. This information will help measure how well these audiences are being served and won't be displayed on the public-facing site. This is currently only for internal use. Choose from:
Not Set (default)
Professional (For their jobs)
Your Information Detail will include one or more sections. Beginning with the third section, each new section will be listed in the Information Detail’s table of contents. (This works the same as with Guides and Curated Lists.)
Within each section, you’ll have several tools to help you present your content. This might feel familiar from authoring Service Details, though you’ll have more options here:
You can add an image, a video, or an iFrame using the same steps described above.
You can also add a rich text section — or a block of formatted text.
Adding Tableau visualizations with short pieces of text to an Information Details page works best when you use 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.
The other 2 options are the “pull quote” and the “stat.” 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.
Stats also callout 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. Your main content will then wrap around the stat:
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.