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. It’s highly preferable to the Service Details page in that it offers many more features, including a table of contents. The Mass.gov team’s new feature development efforts are focused on the Info Details content type, not Service Details.
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, 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

Overview tab

Title and Short description

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.
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.
Banner image on an Info Details page.
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.

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. 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 Details, 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:
  1. 1.
    Click “Add iFrame”
  2. 2.
    Add your iFrame’s URL to URL
  3. 3.
    In the Administrative Title, say what your iFrame shows. This will only be visible to other authors.
  4. 4.
    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.
  5. 5.
    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.
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 user’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 to your Information Detail pages.
  1. 1.
    Click “Add Video”
  2. 2.
    Click “Add new file” (Click "Add existing file" if you've previously uploaded the video. If this is the case, skip step 4.)
  3. 3.
    Give your video a title in Media Name
  4. 4.
    Paste the URL of your video into Video URL
  5. 5.
    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

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.

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.

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. ‌
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.

Intended audience

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

Content tab

Sections

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 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. Your main content will then wrap around the stat:
Left-aligned stat

Helpful tips for creating Information Details

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.

Was this article helpful?

Last modified 14d ago