Page component: Hub banners

This reference guide describes the two variants of the "banner" component that can appear on hub front end pages:

• The hub banner, which appears only on the hub page page type
• The stream banner, which appears on the marketing stream and sales stream page types when the Banner+Logo template is used

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 these page components, 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 hub banners

In the hub front end, hub banners are user-configurable graphic elements that appear only on pages that display a grid of item tiles, i.e. the hub home page (by default) and stream pages (if enabled). They represent the most prominent visual element on these pages, and are generally used to help establish the theme/use case/category of the content that the page. Both types of hub banner consist primarily of a banner image or solid color, with smaller images (i.e. logos) and text overlaid.

Hub banner

This component appears only on the hub page page type. As there is only one instance of this page per hub front end, the banner only appears once throughout the entire hub front end.

For a visual reference to this page component, see Page layout: Hub page.

DOM structure

Below is the high-level DOM structure of the hub banner:

<!-- Banner image lives in the .uf-hero-header class -->
<header class="uf-hero-header">
  ...
  <!-- 'Company Name' text here -->
  <h1 class="title"></h1>
  <!-- 'Introduction' text here -->
  <p class="subtitle"></p>
  ...
</header>

Elements and CSS selectors

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

Dimensions and positions

• The Background Image element is positioned directly below the [hub navigation page component](for all viewport sizes). It is centered on the page with its width set to 100% of page width. The height of this element for all viewport sizes is set to 40rem (400 px).
• The Hero Logo/Company Name and Introduction elements are located within a div with the class has-text-centered, which is set to align these elements to the div center.
• The Hero Logo element is is set to a max-width of 55rem (550 px) and a max-height of 21rem (210 px) on viewports 861 px wide or larger. For viewports 860 px wide or smaller, the max-width changes to 25rem (250 px) and the max-height to 17rem (170 px).
• The font size of the Company Name element is set to 4rem (40 px).
• The font size of the Introduction element is set to 2.6rem (26 px).

Hub backend configuration

The content of all elements in the hub banner component (i.e. images and text) are user-configurable in the backend. These elements are set under Hubs > Appearance > Branding using the following settings:

• Background Image: Images (picture icon) > Background Image
• Hero Logo: Images (picture icon) > Hero Logo
• Company Name: Text (pencil icon) > Company Name
• Introduction: Text (pencil icon) > Introduction
• Background + Link Color: Colors (paint bucket icon) > Background + Link Color

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

• Remove Hero: When enabled, hides the entire component (everything within <header class="hero uf-hero-header"></header>) from the DOM.

Stream banner

This component appears on the stream page page type, specifically for pages with:

• The marketing stream or sales stream secondary page types, and
• The Banner+Logo template enabled for the stream in the backend

It does not appear on any other stream page secondary page type, or if the Default template is enabled for a marketing stream or sales stream page.

For a visual reference to this page component, see Page Layout: Stream Pages.

DOM layout

Below is the high-level DOM layout of the stream banner:

<header class="hero-template">
  <!-- Banner image lives in the .hero-template-overlay class -->
  <div class="hero-template-overlay"></div>
  <div>
    ...
    <!-- Banner text here -->
    <h2 class="title"></h2>
    ...
  </div>
</header>

Elements and CSS selectors

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

Dimensions and positions

• The Banner (Color) element is positioned directly below the [hub navigation page component](for all viewport sizes). It is centered on the page with its width set to 100% of page width. The height of this element for all viewport sizes is set to 25rem (250 px).
• The Banner (Image) element is set to cover the entire Banner (Color) element, so it does not repeat.
• The Company Logo and Prospect Logo elements are both set to a width of 100 px and a height of 100 px on viewports 861 px wide or larger. For viewports 860 px wide or smaller, the width changes to 75 px and a height of 100 px. The Glyphicon element between them does not change in size.
• The Avatar element is positioned centered on the bottom border of the Banner (Color) element, and centered horizontally on the page. It is set to a min-width of 80 px and a min-height of 80 px. It also has a white outer border 3 px wide.
• The font size of the Banner Title element is set to 3rem (30 px).

Hub backend configuration

The content of all elements in the stream banner component (i.e. images and text) are user-configurable in the backend. These elements are set under Hubs > Content > Stream > Appearance using the following settings (set for each stream individually):

• Banner (Color): Banner Color
• Banner (Image): Banner Image and Banner Image Opacity
• Company Logo: Company Logo and Company Logo Background Color
• Glyphicon: Glyphicon
• Prospect Logo: Prospect Logo and Prospect Logo Background Color
• Banner Title: Banner Title and Title Color