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.
The Mosaic is a natural fit for the top part of an Org page in that it can be used to call attention to multiple pieces of important information in an eye-catching format.
Image sizes
Links to 5 pages, either on or off Mass.gov
PNG, GIF, JPG, and JPEG accepted
At least 6 images, 1 being a featured image
Featured image - 396 x 660 pixels (portrait), 256 MB max
Additional images - 400 x 300 pixels, 256 MB max
Please note that images must be exactly these dimensions, not at least.
Planning your Mosaic
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.
Step 1 : Add a “Featured” section
The Featured Item Mosaic button can be found under the “Content” tab and then under “Section Content.”
Step 2: Create your “Highlighted” image Featured Item
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 ellipsis to its end.
Reordering your Featured Items
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?
Last updated
