Recruitment Marketing Public

Tile layouts are composed of individual tiles, which can be displayed as a grid or as a mosaic. A tile consists of a required title and an optional subtitle, image, URL, jobs criteria, and image accessibility settings.

They are commonly used to display a series of job departments. Each tile would consist of an image representing that department, the title, an optional subtitle, and the number of active jobs in that department. Clicking on the tile would then typically bring the user to a landing page representing more information on that department, or a filtered job search.

To add a tile layout to a page, first create the tile layout. Refer to the instructions below for further details.

Creating a tile layout

To create a new tile layout:

1. From the side menu, under Content, click Web Pages.
2. Click the Tile Layouts tab.
3. On the Tile Layouts page, click New in the top right of the page.
4. Complete the following information:
   1. Name: This is the friendly name used to identify this tile layout.
5. Click Save.

To add a tile:

1. Under the Tiles column, click on the 0 tiles link on the tile layout table. This will bring you to the tiles management page for this tile layout.
2. Click New in the top right of the page.
3. Complete the following information:
   1. Title: Enter a title, e.g., Accounting services.
   2. Subtitle: This is optional and will appear underneath the title.
   3. Criteria: This will determine the number of jobs that appear underneath the subtitle. See Job criteria for guidance on how to use this.
   4. URL: This is optional, and if populated will navigate a candidate when they click on a tile.
   5. Image: Click the Choose an image button to select an image from the gallery to represent the tile title.

Accessibility

Using the What is the purpose of this image? field, mark the image as Decorative or Informative. If the image is marked as Informative, then ideally, you should populate the Image alternative description field to improve the content for screen readers. If no description is supplied, then one is generated with labels representing the image, e.g., "Person, Whiteboard, Office, Meeting", etc. You can find more information on image accessibility here. 

Sorting tiles

Use the Move position (bidirectional arrows) icon on the Tile layout posts management page of a tile layout to position tiles.

Add a tile layout to a web page

Once you have created a tile layout, you can add it to a page in your career site by adding the Tile Layout block to that particular page.

1. Using the Page Editor, add a block to display the tile layout.
2. From the Content Block Library, under Misc blocks, hover over Tile Layout and click Add.

Once the block has been added, click the Edit icon to choose the tile layout to be displayed. Click the Save button to keep the settings.

The styling of the tile layout block can be adapted by adding appropriate CSS to the relevant page theme.

Positioning tiles

A tile layout has 12 columns across. Each tile, by default, takes up 4 columns and 1 row. This means that 6 tiles in a layout will create a 3 x 2 grid. To achieve a mosaic effect like the image below:

• The first two images take up 4 columns and 1 row.
• The third image takes up 4 columns and 2 rows.
• The final two images take up 5 and 3 columns respectively, and 1 row each.

To edit the columns and rows of a tile within a page block:

1. Click the grid icon on the top right of the image.

   

2. Make the changes to the columns and rows.

   

3. Click Save.