Key-value pairs
Key-value pairs are lists of properties (keys) followed by the corresponding value.
Preview
Header
General guidelines
Do
- Values may contain icons. Acceptable icons are status indicators and the external link icon. Status indicators are left-aligned, and external link icons are to the right of the end of the text.
- If the key isn't sufficiently describable in a single line, provide the user with assistance with an info link that opens the help panel with more information.
- Use column titles when groups of key-value pairs should be distinguished from each other. In that case provide a column title for each column.
- Use - (minus sign) for any empty values.
Don't
- Don't collapse data using ellipses or other characters; always show the full string for both key and value.
Writing guidelines
Use sentence case (not title case).
Development guidelines
This pattern is not implemented in the form of a component, but we provide all the components that allow you to correctly style and embed key-value pairs according to our guidelines.
Key-value pair
To display the key label, use the box component with
variant="awsui-key-label".To have the correct vertical spacing between key-value pairs, use the space between component with
size="l".
Column titles for key-value pairs
Use <h3> heading for column titles. To achieve the correct styling, use the box component with variant="h3" and padding="n" to remove the default padding.
Container
Key-value pairs should be displayed inside a container.
Column layout
Use the column layout component to achieve a multi-column display. Use its 'text-grid' variant.
Progress bars
Use the progress bar component with variant="key-value".
Copy to clipboard
Use the copy one line of text variant of the copy-to-clipboard pattern.
Additional spacing
Additional spacing is needed in order to correctly embed the key-value pairs columns inside a container when the container doesn’t have gutters (for example: when there is also a table in the container).
You can find a set of relevant, complete examples following.
Key-value pairs in a container
Preview
Header
Code
The following code uses React and JSX syntax .
import React from 'react';
import { Box, Container, Header, Link, SpaceBetween, StatusIndicator } from '@cloudscape-design/components';
const ValueWithLabel = ({ label, children }) => (
<div>
<Box variant="awsui-key-label">{label}</Box>
<div>{children}</div>
</div>
);
export default () => (
<Container header={<Header headingTagOverride="h3">Header</Header>}>
<SpaceBetween size="l">
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">
<StatusIndicator>Value for positive status</StatusIndicator>
</ValueWithLabel>
<ValueWithLabel label="Label for key">
<Link href="https://example.com/" external={true}>
Value with external link
</Link>
</ValueWithLabel>
</SpaceBetween>
</Container>
);
Key-value pairs in a container with a 3-columns display
Preview
Header
Code
The following code uses React and JSX syntax .
import React from 'react';
import {
Box,
Button,
ColumnLayout,
Container,
Header,
Link,
Popover,
ProgressBar,
SpaceBetween,
StatusIndicator,
} from '@cloudscape-design/components';
import './custom.scss';
const ValueWithLabel = ({ label, children }) => (
<div>
<Box variant="awsui-key-label">{label}</Box>
<div>{children}</div>
</div>
);
export default () => (
<Container header={<Header headingTagOverride="h3">Header</Header>}>
<ColumnLayout columns={3} variant="text-grid">
<SpaceBetween size="l">
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">
<StatusIndicator>Value for positive status</StatusIndicator>