HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
When to use
Anatomy of a NameValuePair
Variants
Horizontal (default)
Vertical
Grid
Multiple NameValueLists on a single page
Name-Value pair as a read-only display for text inputs
Name-Value Pair as a read-only display in horizontal
Content truncation
Name-Value pair with empty value
When to display “empty value” name-value pairs
When to omit “Empty value” name-value pairs
Hierarchy
Order
Headings
Scale
Font weight
Color
Responsiveness
Name-value alignment
Controlling the width of the name and value
Components

NameValueList

A NameValueList displays a group of NameValuePairs.

Created on
10/5/21, 2:48 PM
Description
Full-service A.I. insights and data center networks
IP address
172.98.091.0

When to use

Consider using a NameValueList for the following use cases:

  • Displaying a list of name and value pairs.
  • Presenting metadata in a clear, scannable and consistent way.
  • Decreasing the time taken to review data.

Anatomy of a NameValuePair

1
3
2
3
Diagram illustrating the four parts composing a NameValuePair.

A NameValuePair is a set of two related elements: a name, which identifies a data item, and a value, which is the description of that data.

  1. Name
    A name is a unique indentifier or term referring to a data item. This is typically a constant. In general, name labels are displayed in sentence case (the first letter is a capital and the following words are in lowercase).

  2. Value
    Value is the description of data or a pointer to the location of that data. The format of the value can vary, depending on the data set. Content can include: single line description, multi line description, anchors, array or list of items.

Single line description
This is an example of a single-line description
Multi-line description
This is an example of a multi-line description like full-service AI insights, security and unified infrastructure management for campus, branch, remote, and data center networks
Created by
jane.doe@email.com
List of items
Item 1, Item 2, Item 3, Item 4, Item 5
Example showing that value can include different types of content.
  1. Supporting icons/visuals (optional)
    Icons may be included to visually support the name or value. It is recommended not to use icons for both name and value at the same time. This can cause unnecessary visual noise and distract from vital information.
Temperature
Ok
Storage
Warning
Example showing supporting icons for value.
Active
90
In progress
24
Example showing supporting icons for name.

Variants

Horizontal (default)

Created on
10/5/21, 2:48 PM
Created by
jane.doe@email.com
Default storage class
Block Storage Cost
Description
Full-service A.I. insights, security and unified infrastructure management for campus, branch, remote, and data center networks.
IP address
172.98.091.0

Vertical

The pairProps direction determines how the name and value are aligned. If you want the name to be on top of the value, apply pairProps={{direction: 'column'}}.

Created on
10/5/21, 2:48 PM
Created by
jane.doe@email.com
Default storage class
Block Storage Cost
Description
Full-service A.I. insights, security and unified infrastructure management for campus, branch, remote, and data center networks.
IP address
172.98.091.0

Grid

Description
Whether to enable email link user authentication
Ephemeral storage
54.7% (3000 GB of 5489 GB)
Kubernetes version
19.7
IP address
172.98.091.0
Created on
13/02/2021 at 14:23:32

Multiple NameValueLists on a single page

Demo_Cluster_5

Name-Value pair as a read-only display for text inputs

In some cases, NameValuePairs may be used as read-only display for text inputs that are editable inline. Here, the name and value text styling should match the Text Input component (sans border).

Profile Details

First name
Jane
Country
United States
Email
jane.smith@hpe.com

Name-Value Pair as a read-only display in horizontal

Company Information

Add your company information.

Company name
AT&T
Product name
Connect
Contact email
jane.smith@email.com
Phone number
--
Copyright
--
Terms and conditions
--
Privacy policy
--
Security
--
Contact us
--

Content truncation

When presenting a value as a list of items, the list may be truncated and accompanied by a Button to expand it, displaying all items.

When delimited, content exceeding 192 characters should be truncated.

For vertical lists:

  • 7+ items should be truncated, displaying the first 3 items with a "Show all" button.
  • For 6 or fewer items, show all items and do not truncate.
State
Enabled
Data sources
Azure EA, Azure IN - 003, HPE GreenLake (DEV)-00469, Azure EA-001, HPE Aruba (Dev)-03464, HPE GreenLake (Test)-004681, Azure EA-003, HPE Aruba (Stage)-03464, HPE GreenLake (DEV)-00468, Azure ...
Services
Azure EAAzure EA-001Azure EA-003

Name-Value pair with empty value

If the value of a name-value pair is empty, use -- in place of where a value would appear. This visual indicator aids the user in identifying fields that do not have values, without increasing cognitive load.

To inform assistive-technology users of an empty state, add an a11yTitle="No value" to the Text component that would otherwise render the data.

Depending on the use case, it may or may not be necessary to render a name-value pair with an empty value to the user.

When to display “empty value” name-value pairs

In certain scenarios, it is important to display to a user that a certain name-value pair does not have a value. These scenarios include:

Review/Edit pages - when a user has made configuration selections (such as in a Wizard) or is editing configurations (such as settings), all name-value pairs should be visible so the user knows which options they have and have not configured.

Wizard Title
Step 3 of 3

Review & create

Review your configuration details.

Request name
Q1 Collection Request
Request description
--
Contact number
--
Request type
Collection
Initiated by
Jane Cooper
Domain name
https://att.com

Detail pages - these kinds of pages provide the most granular level of information about a device, server, etc. and should display all name-value pairs.

Demo_Cluster_5

When to omit “Empty value” name-value pairs

In certain scenarios, it is not necessary to display name-value pairs that don’t have a value. These scenarios include:

Public-facing profiles - For instances where a profile is outwardly facing, only name-value pairs with values should be displayed. The complete list of possible entries should only be viewable when a user goes to edit their profile.

Profile Details

First name
Jane
Country
United States
Email
jane.smith@hpe.com

Summaries (such as dashboard cards) - Summaries are intended to display information-salient content, often in areas with restricted screen real estate. Given this, name-value pairs without a value should be omitted.

Catalog Lifecyle Manager

Orders

Total orders
114
Active
90
In progress
24

Hierarchy

A successful NameValueList is scannable and easy to grasp. Consider the following methods to imply hierarchy: order, headings, scale, font weight, color.

Order

  • Having a logical order of a name-value list ensures a more scannable display of data.
  • Depending on content displayed, consider ordering by name (alphabetical order) or by importance of information (most relevant to less relevant).
  • Always establish the structure of your data upfront.

Headings

  • Use headings to define a name-value List and/or for grouping multiple name-value lists within a single screen.
  • For accessibility reasons, always ensure semantically correct heading levels are applied. See best practices for applying headings.

Name Value List Heading

Created on
10/5/2021
Created by
jane.doe@email.com
Default storage class
Block Storage Cost
Description
Full-service A.I. insights, security and unified infrastructure management for campus, branch, remote, and data center networks.
IP address
172.98.091.0
Example showing an h2 (Heading level 2) applied to a vertical NameValueList.

Scale

  • Default font size for a NameValueList is “medium” (18px).
  • Font-size options for displaying name and value include small, medium and large.
  • Additional sizes xl and xxl can be opted for displaying value content, depending on styling needs (such as for displaying on a dashboard page layout).
  • The size of name can differ from value.
  • Name should never be scaled bigger than its value.
Text styles
Name
Value
Text / XSmall
Text / Small
Text / Default
Text / Large
Text / XL
n/a
Text / XXL
n/a
Name
FirstName LastName
Username
firstname
Country
United States
Do

In this example, names are listed in xsmall size with values displayed in default font-size.

Name
FirstName LastName
Username
firstname
Country
United States
Don't

Don’t scale names bigger than their value.

Font weight

Making the font bolder or thinner is another way to create hierarchy that’s easily identifiable.

  • Typically, use a bold weight on names to increase scanability within the list
  • In some cases, a value may be displayed in a bold weight to draw the reader’s attention. An example of this application might be a dashboard page.
  • Don’t use bold text for both name and value at the same time.
  • Don’t use a bold font-weight for any long format content as this can be very hard to read and overwhelm the user.
Serial number
MXQ83700F3
Product ID
JL258A
IP address
172.98.091.0
Example showing a horizontal NameValueList where the names are in a bold font-weight.
Policies
23
Rules
380
Compliance
80%
Example showing a grid NameValueList where the values are in a bold font-weight.
Health
Healthy
State
Active
ID
b3894722-adscb29308478-8032j
API endpoint
democluster1.dev.cloud.net
Default storage class
Block Storage Cost
Description
This is a short description of the cluster.
Version
1.18
Nodes
3 Control Plane, 5 workers
Do

In this example, the bolded names lend to the visual hierarchy of the content displayed and makes it easier to scan.

Health
Healthy
State
Active
ID
b3894722-adscb29308478-8032j
API endpoint
democluster1.dev.cloud.net
Default storage class
Block Storage Cost
Description
This is a short description of the cluster.
Version
1.18
Nodes
3 Control Plane, 5 workers
Don't

Don’t use a bold font-weight for both name and value. In this example, the hierarchy and flow of information is not clear which can cause the reader to be overwhelmed by the data presented.

Languages
English, Spanish, French, Chinese, Japanese, German, Korean, Italian, Arabic, Portugese, Russian
Operating System
VMware ESXi 6.7.0 Build-14320388 Update 3 Patch 73 6.7.0 Build-14320388 Update 3 Patch 73 ESXi 6.7.0 Build-14320388 Update 3 Patch 73 6.7.0 ESXi 6.7.0 Build-14320388 Update 3 Patch 73 6.7.0
Do

Keep long format content in a regular font-weight (not bold).

Languages
English, Spanish, French, Chinese, Japanese, German, Korean, Italian, Arabic, Portugese, Russian
Operating System
VMware ESXi 6.7.0 Build-14320388 Update 3 Patch 73 6.7.0 Build-14320388 Update 3 Patch 73 ESXi 6.7.0 Build-14320388 Update 3 Patch 73 6.7.0 ESXi 6.7.0 Build-14320388 Update 3 Patch 73 6.7.0
Don't

Never use bold font-weight to display long format content – this can decrease readability.

Color

Options for text color include the default text (default for Name-Value pairs) and text-strong .

Responsiveness

All types of NameValueLists will change to a single column NameValueList on smaller viewports. View this behavior by reducing your window screen until the layout of an example shifts to single column.

Name-value alignment

By default, both the name and the value are left aligned. This can be changed through nameProps and valueProps by setting align to the desired value, such as end. No matter what alignment is chosen, always opt for a consistent presentation across a single NameValueList or NameValueLists on a single page.

Created by
jane.doe@email.com
Created on
10/5/2021
Policies
13
Example showing a horizontal NameValueList with name aligned to the left (default).

Controlling the width of the name and value

The width of name is set to "small" by default to accommodate a reasonable width for common data names. However, if all names are short, it may be appropriate to adjust the name width to something smaller. This can be easily changed through nameProps. For example nameProps={{width: 'xsmall'}}. The width of value is set to medium by default to aid readability of content. However, if necessary, the width of value can also be adjusted with valueProps. For example, valueProps={{width: 'large'}}

Related

Related content you may find useful when using NameValueList.

Grid

Grid is a component based on columns and rows used for organizing layouts. From scaffolding page layouts, to organizing elements within a Card, Grid is a powerful tool for composing responsive, adaptive layouts.
HPE Tables Preview

DataTable

DataTable presents data in a column and row format.
HPE Lists Preview

Lists

Go-to patterns for displaying many services, devices, users, and more.

Still have questions?

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

Edit this page