Data well

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.

Active learners
7.2 Billion
Pluralsight ROI
Vast
Lives changed
11/10
Up to 11
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

Guidelines

Keep labels, sublabels, and values short as possible.

Royalty Payments
$123M
Last 30 days
Do
Royalties Paid to Authors
$123,456,789.03
For the period of the last thirty days
Don't

Usage & types

  • Version
  • Install
    npm install @pluralsight/ps-design-system-datawell
  • Import
    import DataWell from '@pluralsight/ps-design-system-datawell'
Name
Type
Description
Default
children
Required
React.ReactNodemain data to display
label
Required
stringprimary explanatory label
subLabelstringsecondary contextual label