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.

Default


VStack(alignment: .leading, spacing: Spacing.small) {
  PBLabelValue("Role", "Administrator, Moderator")
  PBLabelValue("Email", "anna.black@powerhrg.com")
  PBLabelValue("Bio", longText)
}

Details


VStack(alignment: .leading, spacing: Spacing.small) {
  PBLabelValue(
    "Installer",
    variant: .details,
    icon: FontAwesome.truck,
    title: "JD Installations LLC"
  )

  PBLabelValue(
    "Project",
    variant: .details,
    icon: FontAwesome.home,
    description: "33-12345",
    title: "Jefferson-Smith"
  )

  PBLabelValue(
    "Project",
    variant: .details,
    icon: FontAwesome.home,
    description: "33-12345",
    title: "Jefferson-Smith",
    date: Date()
  )

  PBLabelValue(
    "Project",
    variant: .details,
    icon: FontAwesome.home,
    description: "33-12345",
    title: "Jefferson-Smith",
    date: Date(),
    active: true
  )
}

Other Examples


VStack(alignment: .leading, spacing: Spacing.small) {
  Text("Patient Profile")
  .pbFont(.title4)
  .padding(.bottom, Spacing.xSmall)

  PBLabelValue(
    "Age",
    variant: .details,
    icon: FontAwesome.user,
    title: "24 yrs old"
  )

  PBLabelValue(
    "Blood",
    variant: .details,
    icon: FontAwesome.tint,
    title: "A +"
  )

  PBLabelValue(
    "Weight",
    variant: .details,
    icon: FontAwesome.weight,
    title: "91 kg"
  )

  PBLabelValue(
    "Height",
    variant: .details,
    icon: FontAwesome.arrowsAltV,
    title: "187 cm"
  )

  Text("Workout Schedule")
  .pbFont(.title4)
  .padding(.top, Spacing.large)
  .padding(.bottom, Spacing.xSmall)

  PBLabelValue(
    "Chest",
    variant: .details,
    icon: FontAwesome.dumbbell,
    description: "6 sets • 8 reps • 40-100 kg",
    title: "Bench Press",
    active: true
  )

  PBLabelValue(
    "Biceps",
    variant: .details,
    icon: FontAwesome.dumbbell,
    description: "5 sets • 12 reps • 20-40 kg",
    title: "Barbell Curl",
    active: true
  )

  PBLabelValue(
    "Back",
    variant: .details,
    icon: FontAwesome.dumbbell,
    description: "8 sets • 8 reps • 40-120 kg",
    title: "Back Squat",
    active: true
  )
}

Props

Name	Type	Description	Default	Values
Label	`String`	Sets the label text
Value	`String`	Sets the value	`nil`
Variant	`Variant`	Changes the style of the Label Value	`.default`	`.default` `.details`
Icon	`PlaybookGenericIcon`	Adds an icon next to the title	`nil`
Description	`String`	Sets the description	`nil`
Title	`String`	Sets the title	`nil`
Date	`Date`	Adds a date	`nil`
Active	`Bool`	Changes the style of the Label Value	`false`	`true` `false`

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