Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Components


  • Alert
  • App layout
  • Attribute editor
  • Autosuggest
  • Badge
  • Board components
    • Board
    • Board item
    • Items palette
  • Box
  • Breadcrumb group
  • Button
  • Button dropdown
  • Calendar
  • Cards
  • Charts
    • Bar chart
    • Line chart
    • Area chart
    • Mixed line and bar chart
    • Pie and donut charts
  • Checkbox
  • Code editor
  • Collection preferences
  • Collection select filter
  • Column layout
  • Container
  • Content layout
  • Copy to clipboard
  • Date input
  • Date picker
  • Date range picker
  • Expandable section
  • File upload
  • Flashbar
  • Form
  • Form field
  • Grid
  • Header
  • Help panel
  • Icon
  • Input
  • Key-value pairs
  • Link
  • Modal
  • Multiselect
  • Pagination
  • Popover
  • Progress bar
  • Property filter
  • Radio group
  • S3 resource selector
  • Segmented control
  • Select
  • Side navigation
  • Space between
  • Spinner
  • Split panel
  • Status indicator
  • Table
  • Tabs
  • Tag editor
  • Text content
  • Text filter
  • Text area
  • Tiles
  • Time input
  • Toggle
  • Token group
  • Top navigation
  • Tutorial components
    • Annotation context
    • Hotspot
    • Tutorial panel
  • Wizard
  1. Cloudscape Design System
    • Components
    • Key-value pairs

    Key-value pairs

    Key-value pairs are lists of properties (keys) followed by the corresponding value.

    Get design library

    Preview

    Header

    Distribution ID
    E1WG1ZNPRXT0D4
    Domain name
    example.com
    ARN
    arn:aws:cloudfront::111122223333:distribution/E1WG1ZNPRXT0D4
    Status
    Available
    Price class
    Use only US, Canada, Europe, and Asia
    CNAMEs
    Value with external link 
    SSL Certificate
    Update in progress
    37%
    Custom SSL client support
    -
    Logging
    Off

    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

    Label for key
    Value
    Label for key
    Value for positive status
    Label for key
    Value with external link 

    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

    Label for key
    Value
    Label for key
    Value for positive status
    Status
    Update in progress
    37%
    Label for key
    Value with external link 
    ARN
    arn:aws:cloudfront::111122223333:distribution/E1WG1ZNPRXT0D4
    Label for key
    Very long value that wraps onto the second line because it does not fit in one line

    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>