Global Header

For all products that exist within the HPE GreenLake ecosystem, Global Header with the HPE GreenLake badge should be used.

If a product does not exist within the HPE GreenLake ecosystem, use the HPE Common Header and Footer Web Service.

The Global Header is published as a Figma component in the HPE Design System Component Library.

While the specifics of the Global Header implementation are still being worked out, we do know that the Global Header will:

• Continue to be delivered as its own service with 24/7 support.
• Be distributed as a Web Component which can be easily consumed by any UI framework.

In the meantime, the Global Header Figma component should be referenced for the latest design specs.

For additional questions, feel free to reach out on Grommet Slack in the #hpe-design-system channel.

For HPE applications that exist outside of the HPE GreenLake ecosystem, the HPE Common Header and Footer Web Service provides a tunable, yet consistent header and footer. It is provided as a service and injected into your application at run-time.

The HPE Common Header is a standardized header to be used across applications. HPE provides an implementation to be referenced from your application. Both the header and footer are customizable, allowing consumers to choose various features to enable such as country selector, shopping cart, HPE passport login, privacy statement links, theme mode, and more.

Each site or application will have different needs. Some header options may not make sense for some sites. The following sections will help you decide which options to include.

The full common header with all options enabled looks like this:

To configure what parts are shown in the common header for your site, go to the HPE Common HFWS test page. There you can choose various options and hit Submit. The common header at the top of that page will change to include those options, and the code sample on that page will change to declare the chosen options as parameters in <script src="https://h50007.www5.hpe.com/hfws/us/en/hpe/latest.r/root?..."> element that configures the header.

You can then copy the URL from that <script> and use it in the code sample at the top of this page to configure the common header and footer for your site.

Let's take a closer look at each part of the common header and footer.

Most sites should choose the default which will be the HPE logo for regular mode or the HPE GreenLake logo for console mode. You can force it to use one or the other by specifically choosing HPE versus HPE GreenLake if needed.

The main navigation in the center of the header provide marketing content. The links allow users to find HPE products, contact support and get more information about HPE. These should also typically be enabled for most sites.

Sign in allows the user to sign in to their HPE Passport account for hpe.com. Enable this option if your site uses features that require a Passport login.

Color Scheme allows implementors to choose either a light or dark variant of the header/footer. The color scheme you choose should be harmonious with the primary background of your application's header and avoid stark contrast which interrupts a user's visual flow. If your application supports light and dark modes, consider setting the color_scheme parameter with a value of either light or dark in alignment with the user's preference.

The common footer contains links for privacy information and various opt-out and choices required by European GDPR standards as well US and other privacy requirements. In general these links should be enabled for customer-facing sites.

The Privacy link goes to HPE's Privacy Statement which explains how HPE manages and protects a users information and respects the relevant privacy standards like GDPR, APEC, etc.

The Terms of Use link goes to the legal statement that governs the user's activity on HPE's websites.

The Ad Choices and Cookies link goes to the section of the Privacy Statement that explains how cookies are used as well as how you can opt-out of targetted advertisements and analytics data such as Google Analytics and Adobe Analytics.

The Do Not Sell My Personal Information link goes to information on how to opt-out of any sale of personal collected by automatic data collection tools.