Data well

Data well is for displaying a large numeric value with supporting labels.

• Source
• Changelog
• Bundle size
• Figma

• Install
  npm install @pluralsight/ps-design-system-datawell
• Import
  import DataWell from '@pluralsight/ps-design-system-datawell'

Examples

Labels

Often Data Wells are shown in a row. Data Well is designed to fit inside this experience. Simply wrap them in a flex container. Labels should provide context into the main meaning of the data shown.

label is always required. subLabel is optional.

import DataWell from '@pluralsight/ps-design-system-datawell'
import React from 'react'

function Example() {
  return (
    <div style={{ display: 'flex' }}>
      <DataWell label="Active learners">7.2 Billion</DataWell>
      <DataWell label="Pluralsight ROI">Vast</DataWell>
      <DataWell label="Lives changed" subLabel="Up to 11">
        11/10
      </DataWell>
    </div>
  )
}

export default Example

Click to expand

Guidelines

Keep labels, sublabels, and values short as possible.

Accessibility

WCAG 2.1 AA Compliance

Props