Tiles component - Concordia University

This is an advanced component. Consult a UCS webmaster to determine if the Tiles component is the best solution for your use case.

Component(s) you might want to use with this one:

Design options

The Tiles component allows an author to *subdivide an existing* Column Control component column by an additional 2 to 4 tiles. Tiles are equal in width.

No gutter: remove the gutter (white space) between tiles

Double margin: increase the gutter (white space) between tiles. This feature only applies to 2 tiles.

Responsive settings: set the number of tiles to ‘stack‘ vertically when the page is viewed on a tablet or mobile phone. This depends on the number of columns and tiles since tablets can typically accommodate more content on a wider screen vs. a phone. If in doubt, leave the settings at the default values (i.e., “1” for both tablet and mobile).

Guidelines

Choose the tile layout most appropriate for your content. For example, if the content is too close together and looks cramped, it could be a sign that using Tiles inside Column Controls is not the ideal layout. It might look better to use two rows of 3 columns or 2 rows of 4 columns.

Accessibility

The Tiles component provides a method for laying out content in columns that is both accessible and responsive.

When using the Tiles component, follow accessibility best practices for all of the content in the tiles (e.g., heading hierarchy, alt text on images, descriptive link text, etc.).

Examples & use cases

Six tiles in a row

Resize the browser window to see the tablet and mobile display stack to three rows of two icons.

Column Control component settings

Column layout: 3 Columns (33%, 33%, 33%)
Stack after (tablet): 1
Stack after (mobile): 1

All other options left disabled or default (blank)

Tiles component settings

Paragraph systems (tiles): 2
Double margin: enabled
Stack after (tablet): 2
Stack after (mobile): 2

All other options left disabled or default (blank)

Dos

Do consider whether the content is suitable for and best served by dividing up a Column Control component with the Tile component.

Don'ts

Don't use a Tile component in place of a Column Control component.
Don't nest a Tile component inside another Tile component.
Don't use a Tile component as a table if in fact a table is needed to present tabular data.
Don't use a Tile component to lay out Heroes, Cards or Buttons.
Don't display too many Tiles in a narrow space.

Helpful tips & "gotchas"

Once inserted, the component can't be moved using cut-and-paste nor by dragging, UNLESS you previously inserted a Box component to contain the Column Control.

Training

There is no training session for the Tiles component because it is reserved for the UCS Web team to set up as needed.

Need support?

The Web team is here to help.