Page layout: Functionality pages

A reference guide to the functionality page page types and their page elements

This reference guide describes the layout and composition of pages that are categorized as "functionality pages", which includes the following page types:

Usage

Use this guide to understand which components are used on pages with these page types, 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 these page types. Each diagram is annotated with the page components that are present on the indicated 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.

Hub authentication page

The layout below is used for pages with the hub authentication page page type. This page type is used as the login page for hubs that use hub authentication.

Layout

3334

(Click to enlarge)

Page components and CSS selectors

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

Page ComponentContainer CSS SelectorComponent CSS SelectorNotes
Hub Logo.uf-login-header.hero-logo
Hub Name [not shown].uf-authentication.uf-login-headerOnly displayed if no hub logo has been set in the backend.
Password Copy.uf-login-form.uf-login-instructionsDisplays "Please enter a valid password to enter this hub" by default.
Password Field.uf-login-label-float-group.uf-login-passphrase
Password Field Placeholder Text.uf-login-label-float-group.uf-login-field-labelDisplays "enter password" by default.
Submit Button.uf-login-fieldset.uf-login-submit
Page BackgroundN/Abody.uf-hub-loginActs as a container for all components above. Displayed centered on the page.

🚧

Important

To customize the hub authentication page, you must enable the option Hubs > Hub Options > Authentication > Login Page Customization > Include Custom Code in the hub backend.

Stream authentication page

The layout below is used for pages with the stream authentication page page type. This page type is used as the login page for stream pages that use stream authentication.

Layout

3334

(Click to enlarge)

Page components and CSS selectors

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

Page ComponentContainer CSS SelectorComponent CSS SelectorNotes
Stream Name.uf-authentication.uf-login-header
Stream Description.uf-authentication.uf-login-description
Passphrase Copy.uf-login-form.uf-login-instructionsDisplays "Enter Valid Stream Passphrase" by default.
Passphrase Field.uf-login-label-float-group.uf-login-passphrase
Passphrase Field Placeholder Text.uf-login-label-float-group.uf-login-field-labelDisplays "Passphrase" by default.
Submit Button.uf-login-fieldset.uf-login-submit
Page BackgroundN/Abody.uf-stream-loginActs as a container for all components above. Displayed centered on the page.

Author page

The layout below is used for pages with the author page page type. This page type is used to display a content author's bio and link to content they have authored.

Layout

3334

(Click to enlarge)

Page components and CSS selectors

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

Page ComponentContainer CSS SelectorComponent CSS SelectorNotes
Hub Navigationbody.uf-top-nav-containerSee Page Component: Hub Navigation for more information.
Author Avatar.uf-author-profile.uf-author-avatarOnly displayed if author had uploaded a profile picture.
Author Name.uf-author-about.title
Author Bio.uf-author-about.subtitle
Tile Container.uf-lazy-loader.uf-tile-containerSee Page Component: Tile Grid for more information.
Footerbody.uf-footer

Search page

The layout below is used for pages with the search page page type. This page type is used to display search results when the search function built into the hub navigation page component is used.

Layout

This layout is used for pages with the search page page type.

3334

(Click to enlarge)

Page components and CSS selectors

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

Page ComponentContainer CSS SelectorComponent CSS SelectorNotes
Hub Navigationbody.uf-top-nav-containerSee Page Component: Hub Navigation for more information.
Filter Options.search-results-header.search-results-filtersOnly displayed when the search function is used from a stream page or item page.
Search Query.search-results-header.search-query
Content Type Heading.search-results.titleMay be displayed multiple times if search results include multiple content types.
Search Result Title.search-result-link.search-result-title
Search Results Container.search-results.search-results-list
See More Button.search-results.uf-buttonOnly displayed if a section of the search results list contains more than 5 items.
Footerbody.uf-footer

Privacy page

The layout below is used for pages with the privacy page page type. This page type is used to display a hub's privacy policy and privacy groups settings, if those features are enabled in the hub.

Layout

3334

(Click to enlarge)

Page components and CSS selectors

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

Page ComponentContainer CSS SelectorComponent CSS SelectorNotes
Hub Navigationbody.uf-top-nav-containerSee Page Component: Hub Navigation for more information.
Breadcrumbs.uf-breadcrumbs-container.uf-breadcrumbsSee Page Component: Breadcrumbs for more information.
Privacy Policy Container [not labeled].uf-privacy-policy-page.entry-wrapperContains the Privacy Policy Title, Date Updated, and Privacy Policy Text components.
Date Updateddiv.meta.privacy-policy-dateAutomatically set based on the last update to the Privacy Policy text in the hub backend.
Privacy Policy Title & Privacy Settings Title.uf-article-header.title
Privacy Policy Text.uf-privacy-policy.uf-privacy-entry-contentDisplays the Privacy Policy, if set.
Group Title.uf-privacy-group-info.uf-privacy-group-titleMay be displayed multiple times if multiple Privacy Groups are configured.
Group Description.uf-privacy-group-info.uf-privacy-group-descriptionMay be displayed multiple times if multiple Privacy Groups are configured.
Group Toggle.uf-privacy-group-toggle.uf-checkbox-toggleMay be displayed multiple times if multiple Privacy Groups are configured.
Footerbody.uf-footer