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 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.
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?
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.
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.
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
- Item0DescriptionInactive
- Item1DescriptionActive
- Item2DescriptionActive
- Item3DescriptionInactive
- Item4DescriptionActive
- Item5DescriptionActive
- Item6DescriptionInactive
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
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
- Server 2 PROLIANT SY 990 GEN9
- Server 3 PROLIANT SY 990 GEN9
- Server 4 PROLIANT SY 660 GEN10
- Server 5 PROLIANT SY 660 GEN10
- 3M442501WV PROLIANT DL380 GEN10
- ZFD3712GP
- FTR1237J
- FTRXX237J
- FTR8237J PROLIANT DL380 GEN10
- 2221K2501KRL PROLIANT DL385 GEN10 PLUS
- SGFF850T8LK
- 22833501KR
- SGFF850T8LK PROLIANT DL380 GEN10
- MXQ824045Q PROLIANT DL360 GEN10
- S76GH939821GF3 PROLIANT DL360 GEN10
- C89-20146
- 2LLP73300ZX
- DAOI-8240458 PROLIANT DL360 GEN10
- 9AS-02708SP PROLIANT DL325 GEN10 PLUS
- DF-R501X5.lab PROLIANT DL380 GEN10
- JYL150TYL
- DXS4045N
- XFR.0278 PROLIANT DL360 GEN10
- RRR50TXT
- CFDE0YPQ
- rel34.lab.com PROLIANT DL380 GEN10
- 92RO010Z PROLIANT DL380 GEN10
- RRE44045S
- RT21867
- IL1Kl.lab PROLIANT DL380 GEN10
- 453FFEW3 PROLIANT DL360 GEN10
- 5G009LK
- TR902JG21 PROLIANT DL380 GEN10
- RE4.322.lab PROLIANT DL360 GEN10
- LME4.ir.lab PROLIANT DL380 GEN10
- 34265FDE49 PROLIANT DL360 GEN10
- CFDE1GBW PROLIANT DL385 GEN10 PLUS
- 524FAV32F PROLIANT DL360 GEN10
- 8742DS576 PROLIANT DL380 GEN10
- 2MFD5t0110 PROLIANT DL380 GEN10
- 34EP0065
- 709522R
- 432DE45TH PROLIANT DL360 GEN10
- FG500352 PROLIANT DL380 GEN10
- 0-S024046C PROLIANT DL360 GEN10
- U005E936
- 6432FSCN PROLIANT DL380 GEN10 PLUS
- 3234MFG5.lab PROLIANT DL380 GEN10
- 45FER2sW PROLIANT DL360 GEN10
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.