The Tile Grid component is available in Pages. It allows you to add multiple pieces of content in a consistent tile design. Each tile can have an Image, Title, Description, one or more Links, and its own Background color.


How To

To begin working with the Tile Grid component, first Create or Edit the page where you want to add the component:

  1. In the Main Content Area, select Add Component
  2. Select Tile Grid
  3. Fill in any General information (optional), this will function as a header and precede the list of tiles.


  4. Switch to the Tiles tab and fill in the first tile information.
    • Start by selecting the number of Columns (2, 3, or 4)

    • While ALL fields are optional. Consistency will help the most with the information you display.

      For example, if you only have images for half of the tiles, then it's probably better to NOT add images to any of them; or if you have links for one, trying to use links for the others.

    • The Tile Image has an approximate ratio of 4:3. The Recommended size is 1200 x 900px.

  5. Color options are available in the Background tab. Here you'll be able to select a color for each of the tiles. This will allow you to play with the design to either make them all a different color or create alternating patterns for a more subtle design, e.g., white and gray.

    If you're using a dark colored background, be sure to check the "White text" checkbox to ensure readability.

  6. Once you've added your first Tile, you can use the button Add Tile to add another set of fields and repeat for every tile needed.


  7. Finally, Preview or Save your work.



Examples

A draft sample page can be found in our Website Style Guide. You'll need to be logged in to see it. Here's a screenshot so you can preview it.




All Options Available

The component is made of two tabs:


General

This functions as a header for the component and has the following fields:

  • Title


Tiles

The tiles tab has one or more groups of fields for each tile. You can add more with the button Add Tile located at the bottom. Each tile has the following options:

  • Image
  • Title
  • Description
  • Links
  • Background


Background

The component background tab allows you to change the color of the entire component. This can be handy if you want to visually separate from the previous or next section. Learn more about these options in our Component Basic Fields.