Page layout: Item pages

This reference guide describes the layout and composition of pages with the item page page type (including all variants).

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 variants of this page type. Each diagram is annotated with the page components that are present on the indicated page type variant (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 item page page type is to allow visitors to a hub front end to consume content. As a hub can contain multiple different types of content/media, there are multiple variations of this page type, known as secondary page types. All share similar layouts, and differ primarily in the structure of their main content wrapper, which contains the primary content displayed on the page.

All secondary page types share the same main content wrapper structure. The primary main content wrapper has the class uf-item-content, and nested within are further wrappers, as follows:

• uf-item-content
  • uf-main-content
    • uf-article
      • uf-item-entry-content

The lowest child class, uf-item-entry-content, has an additional child class which is specific to the type (and source) of content displayed. This content-specific class is indicated for each of the secondary page types below, under the Post Content component.

🚧

Item Page Source Code

When editing an item page in the Uberflip backend, users have the ability to directly view and modify the HTML of the content-specific class within the uf-item-entry-content wrapper by using the Source Code option in the editor.

📘

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 item page page types, the container class is applied to the following components:

• Hub Navigation
• The div element with the id of uf-item-container (the container for the main content wrapper)
• Footer

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

Item page: Blogpost

The layout below is used for pages with the Blogpost secondary page type. This secondary page type is used to display blog article content.

Layout

Page components and CSS selectors

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

---

Item Page: Document

The layouts below are used for pages with the Document secondary page type. This includes the following tertiary page types:

• Uberflip (Flipbook)
• Slideshare

This secondary page type is used to display document content. This may either be a PDF document (e.g. an ebook) displayed as an Uberflip Flipbook or a native PDF, or a SlideShare deck. In all cases, the document is displayed in an iframe within the uf-item-entry-content wrapper.

Desktop layout

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

Mobile layout

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

Page components and CSS selectors

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

🚧

Note

The contents of an iframe cannot be styled directly with CSS. However, you can modify the height, width and layout of the iframe container itself.

In addition, if the iframe contains the Uberflip Flipbook viewer, you can modify various appearance options for the Flipbook viewer in the Uberflip backend under Flipbooks > Manage Flipbooks > Folder Options > Edit > Appearance & Branding.

---

Item Page: Video

The layout below is used for pages with the Video secondary page type. This includes the following tertiary page types:

• Brightcove
• Vidyard
• Vimeo
• Wistia
• YouTube

This secondary page is used to display video content. Uberflip does not host video, so all video content must be served from an external host, and is displayed on the item page in an iframe within the uf-item-entry-content wrapper.

Layout

Page components and CSS selectors

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

🚧

Note

The contents of an iframe cannot be styled directly with CSS. However, you can modify the height, width and layout of the iframe container itself.

---

Item Page: Social

The layout below is used for pages with the Social secondary page type. This includes the following tertiary page types:

• Twitter

This secondary page type is used to display social media content. In all cases, a single post from the relevant social network is embedded on the item page within the uf-item-entry-content class.

Layout

Page components and CSS selectors

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