design-system.hpe.design Open in urlscan Pro
2a05:d014:275:cb01::c8  Public Scan

Form analysis
1 forms found in the DOM

Name: hpehf-search-form — https://www.hpe.com/us/en/search-results.html?page=1&q=&autocomplete=0

<form name="hpehf-search-form" accept-charset="utf-8" action="https://www.hpe.com/us/en/search-results.html?page=1&amp;q=&amp;autocomplete=0" class="hpehf-search-form hpehf-centered-content">
  <div class="hpehf-search-placeholder-mobile"></div>
  <a href="javascript:void(0);" class="hpehf-srch-menu-close hpehf-close-btn" title="Close" aria-label="Close"><svg width="24" height="24" focusable="false" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg"><polygon points="21.8,23.4 12,13.7 2.2,23.4 0.6,21.8 10.3,12 0.6,2.2 2.2,0.6 12,10.3 21.8,0.6 23.4,2.2 13.7,12 23.4,21.8 "></polygon></svg><span class="hpehf-srch-close-text">Close</span></a>
</form>

Text Content

Skip To:
Table of Contents

Main Content
 * HPE GreenLake
 * HPE Home
 * Products and Solutions
 * Services
 * Learn
 * Support
 * Contact

 * Dashboard
 * Applications
 * Devices
 * Manage

   
 * 
   
   
 * 
   

Your cart
Close


Close
 * HPE GreenLake
   

Cloud Consoles
 * HPE GreenLake Central
   
 * Data Services
   
 * Compute Ops Management
   
 * Aruba Central
   

HPE GreenLake Administration
 * Manage Account
   
 * Manage Devices
   

HPE Resources
 * HPE Support Center
   
 * HPE Financial Services
   
 * HPE Developer Community
   
 * HPE Communities
   


Close

 * HPE MyAccount
   HPE My Account
   
 * Visit hpe.com
   Visit hpe.com
   
 * Sign Out
   Sign Out
   

My HPE Account
 * Sign Out
   


Close

 * HPE GreenLake
 * HPE Home
 * Products and Solutions
 * Services
 * Learn
 * Support
 * Contact

 * Dashboard
 * Applications
 * Devices
 * Manage




HPE

Design System

Foundation

Components

Templates

Learn


Jump to section
MetricHPE styles
Heading
Semantic usage of heading levels
Best practices for headings
Paragraph
Text
Fonts for offline usage
Foundation


TYPOGRAPHY

The MetricHPE font is an integral part of our personality and design. When we’re
making a statement, our visual language is clear, recognized and understood.



Our typography is about more than words. It’s an integral part of our
personality and design. When we’re making a statement, we want our visual
language to be clear, recognized and understood.

See in Figma


METRICHPE STYLES



The weights and styles shown are part of the HPE Design System theme. MetricHPE
comes in a varity of weights. For digital experiences we use Light, Regular,
Medium, Semibold and Bold weights at a variety of scales to compliment the
content in a given design.


HEADING




H1 HEADING




H2 HEADING




H3 HEADING



H4 HEADING



Show example code



SEMANTIC USAGE OF HEADING LEVELS



For accessibility reasons, always ensure semantically correct heading levels are
applied.

Heading levels create a scaffold of a web page's content structure by defining
the main page title, page sections, and subsections of those sections.

Correctly implementing heading levels:

 * establishes a more scannable visual hierarchy
 * creates a clear HTML structure which is critical for use by assistive
   technologies

If heading levels are not implemented in the correct hierarchy, users of screen
readers and other assistive technologies will have a more effortful and
difficult experience using the application.


BEST PRACTICES FOR HEADINGS


 * Each web page should only have a single h1: <Heading level={1} />.
 * The main page sections following the page title should receive level={2}.
 * Any sub-topics of sections with level={2} should receive level={3}.
 * Never skip heading levels. For example, a heading with level={3} must always
   following a heading with level={2} but can never immediately proceed a
   heading with level={1}.
 * Do not use semantically incorrect headings to achieve a desired style.
   Instead, apply the semantically correct heading and let the size of the
   heading be determined by the theme.
 * It is rare that you should need to use a Heading level greater than 3, as
   this indicates the information on that page may be very dense. Before
   implementing heading levels 4-6, consider if there is a more concise way to
   present the page information or to separate it into more sections
 * For Card specific guidance, see card titles documentation.
 * For Layer specific guidance, see layer titles documentation.

Below is an example of how Heading levels should be implemented for a page
called "Page title" with 3 topics called Topic A, Topic B, and Topic C. Each
topic has 2 subtopics.

<Heading level={1}>Page title</Heading>

  <Heading level={2}>Topic A</Heading>
    <Heading level={3}>Subtopic 1a</Heading>
    <Heading level={3}>Subtopic 2a</Heading>

  <Heading level={2}>Topic B</Heading>
    <Heading level={3}>Subtopic 1b</Heading>
    <Heading level={3}>Subtopic 2b</Heading>

  <Heading level={2}>Topic C</Heading>
    <Heading level={3}>Subtopic 1c</Heading>
    <Heading level={3}>Subtopic 2c</Heading>





When implementing heading levels, always use the correct semantic heading level.
This maintains a well structured HTML document, needed by assistive
technologies.


PARAGRAPH



Paragraph xxlarge



Paragraph xlarge



Paragraph large



Paragraph default



Paragraph small



Show example code



TEXT


Text 6xl

Text 5xl

Text 4xl

Text 3xl

Text xxlarge

Text xlarge

Text large

Text default

Text small

Text xsmall


Show example code



FONTS FOR OFFLINE USAGE



In rare cases where a product needs to reference the MetricHPE fonts but users
don't have internet access from their browser or maybe a designer needs the
fonts locally, you can download the fonts for local use.

MetricHPE fonts can be downloaded from Brand Central in OTF/Vector and Web
formats.


STILL HAVE QUESTIONS?




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


Leave feedback

Edit this page
Feedback
Company
About HPEAccessibilityCareersContact UsCorporate ResponsibilityGlobal Diversity
& InclusionHPE Modern Slavery Transparency Statement (PDF)Hewlett Packard
LabsInvestor RelationsLeadershipPublic Policy
Learn About
Artificial IntelligenceCloud ComputingContainersMachine LearningEnterprise
Glossary
News and Events
NewsroomHPE DiscoverEventsWebinars
PARTNERS
Partner Ready programPartner Ready Vantage programFind a
PartnerCertificationsHPE GreenLake Marketplace
Support
Product SupportSoftware & DriversWarranty CheckEnhanced Support
ServicesEducation and TrainingProduct Return and RecyclingOEM Solutions
Communities
HPE CommunityAruba AirheadsHPE Tech Pro CommunityHPE Developer CommunityAll
Blogs and Forums
Customer Resources
Customer StoriesHow To BuyFinancial ServicesHPE Customer CentersEmail SignupHPE
MyAccountResource LibraryVideo GalleryVoice of the Customer Signup
FOLLOW HPE

© Copyright 2023 Hewlett Packard Enterprise Development LP
   
 * Privacy
   
   
 * Terms of Use
   
   
 * Ad Choices & Cookies
   
   
 * Do Not Sell or Share My Personal Information
   
   
 * Sitemap