Label Value

This kit can be very versatile when used to display text data.

Variant default includes a label and text. However, variant details can be used if multiple elements are necessary in order to make it more descriptive. Variant details may include icon, light text, title and date, as well as the option to make it active (with link color) for clickability purposes.

Summary

Uses Icons

Default

Use this kit to display a label and value text for almost every data entry.

import React from 'react'
import { LabelValue } from 'playbook-ui'

const LabelValueDefault = (props) => {
  return (
    <div>
      <LabelValue
          label="Role"
          value="Administrator, Moderator"
      />

      <br />

      <LabelValue
          label="Email"
          value="anna.black@powerhrg.com"
      />

      <br />

      <LabelValue
          label="Bio"
          value="Proin pulvinar feugiat massa in luctus. Donec urna nulla,
            elementum sit amet tincidunt nec, mattis nec urna. Cras viverra
            lorem odio, id pretium dui interdum ut. Nullam dignissim nisl vitae
            orci vehicula condimentum"
      />
    </div>
  )
}

export default LabelValueDefault

Details

Variant details can pass icon, description, title, date, and active props.

import React from 'react'
import { LabelValue } from 'playbook-ui'

const LabelValueDetails = (props) => {
  return (
    <div>
      <LabelValue
          icon="truck"
          label="Installer"
          title="JD Installations LLC"
          variant="details"
      />

      <br />

      <LabelValue
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
      />

      <br />

      <LabelValue
          date={new Date('18 Nov 2019')}
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
      />

      <br />

      <LabelValue
          active
          date={new Date('18 Nov 2019')}
          description="33-12345"
          icon="home"
          label="Project"
          title="Jefferson-Smith"
          variant="details"
      />
    </div>
  )
}

export default LabelValueDetails

Other Examples

import React from 'react'
import { Flex, LabelValue, Title } from 'playbook-ui'

const LabelValueDetailsExamples = (props) => {
  return (
    <div>
      <Title
          marginBottom="sm"
          size={4}
          text="Patient Profile"
      />

      <Flex>
        <Flex
            marginRight="lg"
            orientation="column"
        >
          <LabelValue
              icon="user"
              label="Age"
              paddingBottom="sm"
              title="24 yrs old"
              variant="details"
          />
          <LabelValue
              icon="weight"
              label="Weight"
              title="91 kg"
              variant="details"
          />
        </Flex>
        <Flex
            orientation="column"
        >
          <LabelValue
              icon="tint"
              label="Blood"
              paddingBottom="sm"
              title="A +"
              variant="details"
          />
          <LabelValue
              icon="arrows-v"
              label="Height"
              title="187 cm"
              variant="details"
          />
        </Flex>
      </Flex>

      <br />
      <br />
      <br />

      <Title
          marginBottom="sm"
          size={4}
          text="Workout Schedule"
      />

      <LabelValue
          active
          description="6 sets • 8 reps • 40-100 kg"
          icon="dumbbell"
          label="Chest"
          paddingBottom="sm"
          title="Bench Press"
          variant="details"
      />
      <LabelValue
          active
          description="5 sets • 12 reps • 20-40 kg"
          icon="dumbbell"
          label="Biceps"
          paddingBottom="sm"
          title="Barbell Curl"
          variant="details"
      />
      <LabelValue
          active
          description="8 sets • 8 reps • 40-120 kg"
          icon="dumbbell"
          label="Back"
          paddingBottom="sm"
          title="Back Squat"
          variant="details"
      />
    </div>
  )
}

export default LabelValueDetailsExamples

Things to Avoid

Try not to use this kit without padding as it will make text illegible if placed right next to the same kit or other kits.

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat