Mosaic component

The Mosaic component allows users to showcase multiple aspects of the website in a compact, flexible and easy-to-use platform.  Users can select 4 or 7 tiles layouts from the configure panel as shown below. 

  1. Click Configure icon (wrench) to open the Configure panel
  1. Click Configure icon (wrench) to open the Configure panel
  1. Click Configure icon (wrench) to open the Configure panel
  1. Click on Edit icon (pencil) to add content to the tile

Layout example

Note: Due to the width restriction, the Mosaic cannot be added to a Column Control layout.

To load the component

To load Mosaic component onto the page:

  1. Open Side Panel if closed, and then click on Components tab
  2. Drag and drop the Mosaic component into the Tab Item component
  1. Click Configure icon (wrench) to open the Configure panel
  1. Click Configure icon (wrench) to open the Configure panel
  1. Click Configure icon (wrench) to open the Configure panel
  1. Click on Edit icon (pencil) to add content to the tile

To configure Mosaic component

Configure mosaic layout (Fig. 1)

  1. Click on the component to open the Edit bar
  2. Click Configure icon (wrench) to open the Configure panel
  3. Select tile layout in the drop down menu
  4. Click Done icon (check mark) to save. The Mosaic component will refresh to reflect your choice of layout selection.

Configure individual tile

There are three different kinds of tile available to the Mosaic component:

  • Mosaic Image Tile
  • Mosaic Image Text Tile
  • Mosaic Tile

Mosaic Image Tile and Mosaic Image Text Tile have identical fields. The difference between the two is the placement of the Title, Sub title, support text and Image. Mosaic Tile does not have the Image field.

Note: Due to the mandatory Title field, once a tile is configured, user will not be able to unconfigure it.

  1. Click on a tile to open the Edit bar.
  2. Click Configure icon (wrench) to open the Configure panel
  3. Populate the Title (required), Sub title, URL the tile should link to, and the Image (only available on Mosaic Image Tile and Mosaic Image Text Tile)

    Note: For the URL, please make sure you use the Path Picker to select the page you want to link to. The Path Picker will allow the system to save the link reference information at the back end and can automatically update the page URL when the linked page is moved to other location.

  4. Click Done icon (check mark) to save (Fig 2)
  5. If there is a need to add supporting text on Mosaic Image Tile or Mosaic Image Text Tile, click on a tile to open the Edit bar and click on Edit icon (pencil) to open rich text editor. 
  6. Click on the Maximize icon (3rd icon from the right) to maximize rich text editor window.
  7. Add content and click on the Done icon (check mark) to close the editor.
  8. Repeat 1-7 until all tiles are configured.

Troubleshooting

I can't add the component onto the Department Landing template.
The component is ONLY available within the Tab Item component and cannot be added to other location in the Department Landing template.

Where can I find out about recommended image size?
To find out more about the best image size for the Mosaic component, please consult the Recommended Image Size page.

I'm not able to select the Mosaic component to adjust/remove it.
To select the Mosaic component (instead of individual tile), you can first select one of the individual tile to open the Edit bar, and then click on the Parent icon (last icon in the Edit bar) to display the parent component selection screen. Choose Mosaic container and the Mosaic component will be highlighted with the Edit bar opened.

I'm not able to add the Mosaic component to a certain location.
Due to the pre-set width on the Mosaic component, it can only be added to a full-width layout.