Page component: Tile grid

This reference guide describes the tile grid component (also called the "tile container"), which is the central component of all types of stream pages, as well as the hub home page.

Usage

Use this guide to understand how this component works, how its individual elements are structured, and how to target them for customization.

The tables in this guide list the constituent elements of this page component, as well as the relevant CSS selectors (for both the component itself, and its container). The listed elements are present in this page component out-of-the-box (or may be present, depending on backend settings).

About the tile grid

The hub front end uses the tile grid to present available content to visitors on stream pages, which display collections of content. On these pages, individual pieces of content are represented by tiles, rectangular containers of uniform size that each contain an image and the title of a content item, along with a hyperlink to the relevant item page. These tiles are arranged in rows and columns, i.e. a "grid".

The tile grid resizes automatically, varying the number of tiles displayed on each row based on the size of the viewport. By default, the component loads up to 20 tiles: if more than 20 tiles are available, a See More button is displayed. On clicking this button, a further 20 tiles are loaded. This repeats until no further tiles are available.

Tile grid

This component is displayed on all pages with the stream page page type, as well as on the hub page page type (i.e. hub home page). For a visual reference to this page component, see Page Layout: Stream Pages.

DOM structure

Below is the high-level DOM structure of the tile grid:

<div id="main-content" class="uf-main-content container">
    <hgroup class="uf-description-block"></hgroup>
    <div id="uf-lazy-loader">
        <ul id="uf-tile-container">

            <!-- tiles are in here -->

        </ul>
    </div>
</div>

Elements and CSS selectors

The following table lists the elements found in this component, along with their CSS selectors:

Hub backend configuration

The component itself is largely not user-configurable in the hub backend. There is one hub-level setting (applying to all streams) that affects the behavior and appearance of this component:

• Load content by "See more" button: Enabled by default, and configured under Hubs > Hub Options > Advanced. When disabled, the See More button is hidden, and replaced with infinite scrolling (additional tiles load automatically on scrolling to the bottom of the page).

There is also one experimental Hubs Lab setting that affects this component:

• Highlight first Item: When enabled, enlarges the first tile (the tile in the first column of the first row in the grid). The enlarged tile occupies the space of 4 regular tiles across the first two rows of the grid, i.e. the first and second columns in the first and second rows of the grid.

This setting does not apply to the hub home page if the default Latest Content stream is used (but does apply if the Latest Content stream has been replaced with a marketing stream). Enabling it does not change the number of tiles displayed by default. On viewports 990 px wide or smaller, the enlarged first tile reverts to regular size. For more information about this type of tile, see Page Component: Item Tiles & CTA Tiles.

Tile grid size and breakpoints

Individual tiles have a preset size of 250 px width by 330 px height, as well as a margin-right of 20 px that is accounted for by the grid. Because tiles retain these dimensions across almost all viewport sizes, the tile grid itself is responsive. To accommodate different viewport sizes, the tile grid adjusts the number of tiles displayed on each row at various breakpoints.

The table below shows the number of tiles per row for each breakpoint, along with the width of the tile grid container:

📘

Note

If the Highlight first Item setting is enabled, the first and second rows of the tile grid will display one fewer tile than indicated in the table above, as the enlarged first tile occupies the space of two tiles on these rows. This is the case only for viewport sizes larger than 990 px wide, as the enlarged tile reverts to regular size on smaller viewports.