Featured Item Mosaic

Use images and content to highlight 5 things about your organization.

Summary

Use the Featured Item Mosaic to create a group (or mosaic) of 5 images that represent your organization, and that link to representative content. This resource shows you how to create a Featured Item Mosaic.

The Mosaic will appear near the top of your Organization Page, between the short description and Contact Information.

The Featured Item Mosaic appears under the short description of your Organization Page

What you’ll need

  • Links to 5 pages, either on or off Mass.gov

  • At least 6 images.

    • 5 should be 400 x 300 px (pixels)

    • 1 should be 300 x 500 px. (This 300 x 500 px can be the same image as one of the 400 x 300 px images.)

Please note that images must be exactly these dimensions, not at least.

Planning your Mosaic

Before we get to work creating our mosaic of Featured Items, let’s take a look at where we’re going. From your users’ perspective, the mosaic is a section of your Organization Page that includes 5 images, each of which links to important content. When you’re done, you’ll have something that looks like this:

This mosaic is made of 3 pieces:

  • Images

  • Links to other pages

  • Link text that tells users where links lead

To create the best user experience, we recommend thinking about the relationships between these pieces. For example, it’s jarring to see an image that has nothing to do with where a link takes you. Make sure each item has a purpose — that is, that it’s not just for looks.

Be sure to fill out the Image credit field, under the "Title Banner" tab, for each image source.

Add credits for your Mosaic images.

To begin creating your mosaic, select the “Featured” tab and click “Add Featured Item Mosaic.”

The top item in your list of Featured Items will be the Highlighted Image. For non-mobile viewers, it will appear this way:

For mobile users, all images will display at the same proportion.

To create this effect, the topmost Featured Item will need 2 images: a 300 x 500 Highlight Image and a 400 x 300 Image.

Lastly, fill out the Link section. Each Featured Item must include a link, meaning you’ll need 5 links in total.

Note: You will need to finish Step #3 before you can save a draft.

Step #3: Create the other 4 non-highlighted items

Click “Add Featured Item” at the bottom left. For each item after the Highlight Image item, you’ll only need to add a 400 x 300 px image, and to fill out the Link section.

If you plan to swap which item is Highlighted, you may want to add 300 x 500 px images to the other Featured Items’ Highlight Image fields, too.

Once you have added 5 Featured Items, you’ll be able to save a draft.

Other useful tips

Long titles

If you write Link text with a title that’s too long to display on the card, the CMS will automatically shorten the text and add an ellipse to its end.

You can drag and drop each item into a different order using the cross-hair in the upper left.

However, since each Featured Item is a large block, this might be awkward to do. An easier way is to click “Show row weights” in the upper right, and then select the order you’d like the items to take from the dropdown. The lower the number, the higher it will be on the page. For example, if 3 items are weighted -1, 0, and 1, then -1 will come first, and 1 will come last.

Mobile view

It’s always a good idea to think about how your content will appear for mobile users. For Organization Pages that feature mosaics, the items will stack in a single column. The only images mobile users will see are the 400 x 300 px that you enter into the Image field.

The fourth and fifth items will be visible when users click “More featured items”:

Was this article helpful?

Tell us what you think button