HPE
Design System
Foundation
Components
Templates
Extend
Jump to section
Page and PageContent working together
Example: content within a single PageContent
Example: Page with full-width background
Variants
Wide
Narrow
Full
Components

Page

Page is a helpful container providing consistent layouts across all HPE applications.

Page makes it easy to implement page layouts uniformly across HPE applications. Two components, Page and PageContent, work together to ensure HPE theme-defined padding, horizontal alignment, max-width, and responsive behaviors are applied in a consistent, turnkey manner.

Page
PageContent
Page header
Other content

Page is a container providing context (i.e. instructions) for how content should be laid out on a page.

PageContent is a container for content within a page and executes Page's instructions. In this particular example, Page's "kind" is set to "narrow" instructing PageContent to have a specified maximum-width, to be horizontally center-aligned, and specifies the width of the horizontal padding surrounding PageContent's content across responsive breakpoints.

Resize your browser window to see how Page and PageContent affect this example's layout across various screen widths.

Page and PageContent working together

Page is the outer layout component and provides the desired layout context. Page’s kind determines which theme-defined alignment, padding, and min/max-widths are applied to its PageContent children.

As a child of Page, PageContent consumes and adheres to the layout styling provided by its parent Page.

<Page kind="wide">
  <PageContent>

    /* All contents within me will respect the
     * max-width, alignment, and padding specified
     * by Page's context. */

  </PageContent>

  /* Contents outside of PageContent are not bound by
   * Page's context. */

</Page>

In most cases, all content on a page can be wrapped in a single PageContent component. However, designs using differing background colors to delineate page sections may accomplish this by applying a PageContent per desired section.

Example: content within a single PageContent

All content is placed within a single PageContent component.

Explore Datasets

Explore datasets from a variety of sources without reliance on IT or governance and compliance.

Discover, analyze, and share quality data. Learn more about data types, creating, and collaborating.

0
items

Example: Page with full-width background

Use cases where an application needs a background to span the entire width of a page section is achieved by setting background={{ fill: "horizontal", ...additional properties }} on PageContent.

This treatment is often seen on marketing sites where backgrounds help visually block content sections. This might also be seen in a context such as an app-store catalog where the hero section might have an image spanning.

Building better, together, with Design Thinking.

Minds coming together from diverse backgrounds, cultures, and perspectives paired with the Design Thinking process are primed for delivering amazing outcomes.

Explore how Design Thinking fosters empathy, creativity, and ultimately better products and services.

Empathize

Design Thinking begins by placing the knowledge that you are designing a solution for people at the forefront of your mind.

This starts your human-centered design journey where you seek to understand for whom are you designing? What is their context and perspective? What are their hopes and desires?

Abstract line art depicting three people 
          in business attire with professional accessories such 
          as cellphones, tablets, and brief cases.
Abstract grid representing a data in a table format.

Define

From the empathy developed, give "names" to the personas, objectives, decisions, challenges, and pain points observed.

Translate observations into a challenge to anchor designs and solutions against and get ready to go.

Ideate

Go wide and wild with ideas. Make them enumarable. Push the possibilities beyond comfortable boundaries into the space of wacky "what ifs" where plausibility isn't a limit.

Survey the generated potentials, find the favorites, and prioritize.

Abstract collection of overlapping boxes of various colors.
Boxes with directional arrows, representing a flow chart.

Prototype

Grab a sharpie, some paper and tape, and make your ideas tangible in mockups and storyboards.

Keep it simple, fail fast, iterate quickly.

Test

Put the prototypes in the hands of the people for whom you are designing and turn back on the power of observation.

Identify impediments. Make note of moments of surpise and delight. What works? Iterate quickly.

Abstract box containing three filled circles 
          separated by dashes.

Get started with Design Thinking today

Access a curated collection of excercises, tool kits, and tutorials by creating a free account today.

Variants

Wide

"Wide" is Page's default kind. The vast majority of pages in HPE applications will likely use Page's "wide" variant.

See page layouts for specifications and content layouts for templates and guidance on responsive designs.

Wide Page

A content section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo gravida tincidunt. Nunc fringilla blandit tortor, id accumsan nisi dictum quis.

Items

  • Item0Description
    Inactive
  • Item1Description
    Active
  • Item2Description
    Active
  • Item3Description
    Inactive
  • Item4Description
    Active
  • Item5Description
    Active
  • Item6Description
    Inactive

Another content section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer commodo gravida tincidunt. Nunc fringilla blandit tortor, id accumsan nisi dictum quis. Aenean porttitor at mi id semper. Donec mattis bibendum leo, interdum ullamcorper lectus ultrices vel. Fusce nec enim faucibus nunc porta egestas. Fusce dapibus lobortis tincidunt.

Narrow

Narrow is for use cases where the desire is to provide a user with singular, focused content or objective, such as editing field values of an object or stepping through a wizard-based task flow. A "narrow" page layout limits the page content's width to large and positions the content at the center of the page.

See page layouts for specifications and use-case guidance.

Narrow Page

A form section

Some descriptive text providing context for the input.

Another form section

Full

"Full" is helpful in situations like presenting a monitoring dashboard filled with a collection of key performance indicators or an interface allowing a user to browse resources displayed on a geographic map. This option allows the page's content to occupy the entire width of the browser window. If the window's width exceeds the available content, the content is left aligned.

See page layouts for specifications and use-case guidance.

Full Page

  • Server 1 PROLIANT SY 480 GEN10
    Okay
  • Server 2 PROLIANT SY 990 GEN9
    Warning
  • Server 3 PROLIANT SY 990 GEN9
    Warning
  • Server 4 PROLIANT SY 660 GEN10
    Okay
  • Server 5 PROLIANT SY 660 GEN10
    Okay
  • 3M442501WV PROLIANT DL380 GEN10
    Critical
  • ZFD3712GP
    Okay
  • FTR1237J
    Okay
  • FTRXX237J
    Okay
  • FTR8237J PROLIANT DL380 GEN10
    Okay
  • 2221K2501KRL PROLIANT DL385 GEN10 PLUS
    Okay
  • SGFF850T8LK
    Unknown
  • 22833501KR
    Unknown
  • SGFF850T8LK PROLIANT DL380 GEN10
    Okay
  • MXQ824045Q PROLIANT DL360 GEN10
    Okay
  • S76GH939821GF3 PROLIANT DL360 GEN10
    Okay
  • C89-20146
    Okay
  • 2LLP73300ZX
    Unknown
  • DAOI-8240458 PROLIANT DL360 GEN10
    Okay
  • 9AS-02708SP PROLIANT DL325 GEN10 PLUS
    Okay
  • DF-R501X5.lab PROLIANT DL380 GEN10
    Okay
  • JYL150TYL
    Okay
  • DXS4045N
    Okay
  • XFR.0278 PROLIANT DL360 GEN10
    Okay
  • RRR50TXT
    Unknown
  • CFDE0YPQ
    Okay
  • rel34.lab.com PROLIANT DL380 GEN10
    Okay
  • 92RO010Z PROLIANT DL380 GEN10
    Okay
  • RRE44045S
    Okay
  • RT21867
    Unknown
  • IL1Kl.lab PROLIANT DL380 GEN10
    Okay
  • 453FFEW3 PROLIANT DL360 GEN10
    Okay
  • 5G009LK
    Okay
  • TR902JG21 PROLIANT DL380 GEN10
    Okay
  • RE4.322.lab PROLIANT DL360 GEN10
    Okay
  • LME4.ir.lab PROLIANT DL380 GEN10
    Critical
  • 34265FDE49 PROLIANT DL360 GEN10
    Okay
  • CFDE1GBW PROLIANT DL385 GEN10 PLUS
    Okay
  • 524FAV32F PROLIANT DL360 GEN10
    Okay
  • 8742DS576 PROLIANT DL380 GEN10
    Okay
  • 2MFD5t0110 PROLIANT DL380 GEN10
    Okay
  • 34EP0065
    Okay
  • 709522R
    Okay
  • 432DE45TH PROLIANT DL360 GEN10
    Okay
  • FG500352 PROLIANT DL380 GEN10
    Okay
  • 0-S024046C PROLIANT DL360 GEN10
    Critical
  • U005E936
    Okay
  • 6432FSCN PROLIANT DL380 GEN10 PLUS
    Okay
  • 3234MFG5.lab PROLIANT DL380 GEN10
    Critical
  • 45FER2sW PROLIANT DL360 GEN10
    Okay

Related

Related content you may find useful when using Page.

HPE Page Layouts Preview
Page Layouts
Choosing a layout is an important first step in designing a user interface. These guidelines will help create a consistent user experience across HPE applications and services.
Content Layouts
Creating responsive, adaptable content layouts is central to the user experience.
Box
Boxes are containers that drive the layout of your content. Flexible props allow the behavior of content to be defined to optimize the user experience.
Main
The Main component is where you define the location and layout of the primary context of your content.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page