Page layout: Hub page

A reference guide to the hub page page type and its page components

This reference guide describes the layout and composition of pages with the hub page page type.

Usage

Use this guide to understand which components are used on pages with this page type, how they are laid out, and how to target them for customization.

The diagrams in this guide are representative of the out-of-the-box layouts of pages with this page type. Each diagram is annotated with the page components that are present on this page type (or which may be present, depending on backend settings).

For each page component, the relevant CSS selectors (for both the component itself, and its container) are provided. Wherever a page component is part of a larger page component that has its own reference guide, this is also indicated.

About this Page Type

The purpose of the hub page page type is to act as the home page of a hub front end. As a result, each hub front end contains only one page with this page type.

This page type is structurally similar to the stream page page type: both of these page types are designed to display content in a browseable grid, so the tile grid page component is a prominent part of their layout.

This page type also includes a unique page component that is not present on any other page type, the hub banner (although the stream page page type has a closely related and very similar component, the stream banner).

Hub page

This page type is used to display a banner representing the hub/brand, as well as a grid of content. By default, this content is the most recently created content in the hub ("Latest Content"), but it can also be the content from any marketing stream if configured as such in the hub backend.

Desktop layout

This layout is used for viewports 1337 px wide or larger:

3334

(Click to enlarge)

Mobile layout

This layout is used for viewports 560 px wide or smaller:

3334

(Click to enlarge)

Page components and CSS selectors

The following table lists the CSS selectors for the labelled page components in the diagrams:

Page ComponentContainer CSS SelectorComponent CSS SelectorNotes
Hub Navigationbody.uf-top-nav-containerSee Page Component: Hub Navigation for more information.
Hero Logo.hero-body.container.hero-logoPart of the Hub Banner page component.
Background Imagebody.uf-hero-headerPart of the Hub Banner page component.
Introduction.hero-body.container.subtitlePart of the Hub Banner page component.
Stream Name.uf-description-block.titleDisplays Latest Content by default.
Full Description.uf-description-block.subtitle
Tile Containerbody.uf-main-content.containerSee Page Component: Tile Grid for more information.
See More Button.uf-lazy-loader.uf-lazy-loader-load-moreCan be hidden and toggled to lazy loading by disabling backend option Hubs > Hub Options > Advanced > Load content by "See more" button
Footerbody.uf-footer

๐Ÿ“˜

Note

Most pages in the hub front end have a container class that is applied to component containers that are centered on the page, and which is used to set their default width. On the hub page page type, the container class is applied to the following components:

  • Hub Navigation
  • Tile Container
  • Footer

You can adjust the default widths of the container class to adjust the widths of these page components.