Key-value pairs
Key-value pairs are lists of properties (keys) followed by the corresponding value.
On this page
Did this page help you?
Tell us more - optional
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 signs (-) for any empty values.
- Use the primary link variant instead of the secondary link variant in cards to help users distinguish links from other surrounding text content.
Don't
- Don't collapse data using ellipses (...) or other characters; always show the full string for both key and value.
Writing guidelines
General writing guidelines
Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.
Use end punctuation, except in headers and buttons. Don’t use exclamation points.
Use present-tense verbs and active voice.
Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.
Avoid directional language.
For example: use previous not above, use following not below.
Use device-independent language.
For example: use choose or interact not click.
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} variant="primary">
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>
</ValueWithLabel>
</SpaceBetween>
<SpaceBetween size="l">
<ProgressBar variant="key-value" label="Status" value={37} description="Update in progress" />
<ValueWithLabel label="Label for key">
<Link href="https://example.com/" external={true} variant="primary">
Value with external link
</Link>
</ValueWithLabel>
</SpaceBetween>
<SpaceBetween size="l">
<ValueWithLabel label="ARN">
<div className="custom-wrapping">
<Box margin={{ right: 'xxs' }} display="inline-block">
<Popover
size="small"
position="top"
dismissButton={false}
triggerType="custom"
content={<StatusIndicator type="success">ARN copied</StatusIndicator>}
>
<Button variant="inline-icon" iconName="copy" ariaLabel="Copy ARN" />
</Popover>
</Box>
arn:aws:cloudfront::111122223333:distribution/E1WG1ZNPRXT0D4
</div>
</ValueWithLabel>
<ValueWithLabel label="Label for key">
Very long value that wraps onto the second line because it does not fit in one line
</ValueWithLabel>
</SpaceBetween>
</ColumnLayout>
</Container>
);
Key-value pairs in a container with a 2-columns display, column titles and multiple rows
You can add as many groups of key-value pairs as you wish. The column layout component will take care of wrapping them based on the number of columns you set and the viewport width
Preview
Header
Column Title
Column Title
Code
The following code uses React and JSX syntax.
import React from 'react';
import {
Box,
ColumnLayout,
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>}>
<ColumnLayout columns={2} variant="text-grid">
<SpaceBetween size="l">
<Box variant="h3" padding="n">
Column Title
</Box>
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">
<StatusIndicator>Value for positive status</StatusIndicator>
</ValueWithLabel>
</SpaceBetween>
<SpaceBetween size="l">
<Box variant="h3" padding="n">
Column Title
</Box>
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">
<Link href="https://example.com/" external={true} variant="primary">
Value with external link
</Link>
</ValueWithLabel>
</SpaceBetween>
<SpaceBetween size="l">
<Box variant="h3" padding="n">
Column Title
</Box>
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">
<StatusIndicator>Value for positive status</StatusIndicator>
</ValueWithLabel>
</SpaceBetween>
<SpaceBetween size="l">
<Box variant="h3" padding="n">
Column Title
</Box>
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">
<Link href="https://example.com/" external={true} variant="primary">
Value with external link
</Link>
</ValueWithLabel>
</SpaceBetween>
</ColumnLayout>
</Container>
);
Key-value pairs in a container with a table
Preview
Header (5)
Table header
Variable name | Current value |
---|---|
Item 1 | First |
Item 2 | Second |
Item 3 | Third |
Item 4 | Fourth |
Item 5 | Fifth |
Code
The following code uses React and JSX syntax.
import React from 'react';
import { Box, ColumnLayout, Container, Header, Table } from '@cloudscape-design/components';
const ValueWithLabel = ({ label, children }) => (
<div>
<Box variant="awsui-key-label">{label}</Box>
<div>{children}</div>
</div>
);
export default () => (
<>
<Container
variant="stacked"
header={
<Header headingTagOverride="h3" counter="(5)">
Header
</Header>
}
>
<ColumnLayout columns={4} variant="text-grid">
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
<ValueWithLabel label="Label for key">Value</ValueWithLabel>
</ColumnLayout>
</Container>
<Table
variant="stacked"
header={<Header variant="h3">Table header</Header>}
columnDefinitions={[
{
id: 'variable',
header: 'Variable name',
cell: item => item.name,
isRowHeader: true,
},
{
id: 'value',
header: 'Current value',
cell: item => item.value,
},
]}
items={[
{
name: 'Item 1',
value: 'First',
},
{
name: 'Item 2',
value: 'Second',
},
{
name: 'Item 3',
value: 'Third',
},
{
name: 'Item 4',
value: 'Fourth',
},
{
name: 'Item 5',
value: 'Fifth',
},
]}
/>
</>
);