Playbook Design System

Contact

Default

(349) 185-9988

(555) 555-5555

email@example.com

(324) 562-7482

(349) 185-9988

<%= pb_rails("contact", props: {
  contact_type: "cell",
  contact_value: "349-185-9988",
}) %>

<%= pb_rails("contact", props: {
  contact_value: 5555555555,
}) %>

<%= pb_rails("contact", props: {
  contact_type: "email",
  contact_value: "email@example.com",
}) %>

<%= pb_rails("contact", props: {
  contact_type: "wrong number",
  contact_value: "3245627482",
}) %>

<%= pb_rails("contact", props: {
  contact_type: "work-cell",
  contact_value: "349-185-9988",
}) %>

Detail Indicator

(349) 185-9988 Cell

(555) 555-5555 Home

(324) 562-7482 Work

(324) 562-7482 Work-Cell

1233 Ext

<%= pb_rails("contact", props: {
  contact_type: "cell",
  contact_value: "349-185-9988",
  contact_detail: "Cell",
}) %>

<%= pb_rails("contact", props: {
  contact_value: 5555555555,
  contact_detail: "Home",
}) %>

<%= pb_rails("contact", props: {
  contact_type: "work",
  contact_value: "3245627482",
  contact_detail: "Work",
}) %>

<%= pb_rails("contact", props: {
  contact_type: "work-cell",
  contact_value: "3245627482",
  contact_detail: "Work-Cell",
}) %>

<%= pb_rails("contact", props: {
  contact_type: "extension",
  contact_value: "1233",
  contact_detail: "Ext",
}) %>

2,000

.50

Light

€

342

.00

Bold

$

45

/mo

<%= pb_rails("currency", props: {
  amount: "2,000.50",
  emphasized: false,
  label: "Emphasized False",
  margin_bottom: "md",
  size: "sm",
}) %>

<%= pb_rails("currency", props: {
  amount: "342",
  label: "Light",
  margin_bottom: "md",
  size: "sm",
  symbol: "€",
  variant: "light",
}) %>

<%= pb_rails("currency", props: {
  amount: "45",
  label: "Bold",
  size: "lg",
  unit: "/mo",
  variant: "bold",
}) %>

Size

Small

$

2,000

.50

Medium

€

342

.00

Large

$

45

/mo

<%= pb_rails("currency", props: {
  amount: "2,000.50",
  label: "Small",
  margin_bottom: "md",
  size: "sm",
}) %>

<%= pb_rails("currency", props: {
  amount: "342",
  label: "Medium",
  margin_bottom: "md",
  size: "md",
  symbol: "€",
}) %>

<%= pb_rails("currency", props: {
  amount: "45",
  label: "Large",
  size: "lg",
  unit: "/mo",
}) %>

Alignment

Left

$

2,000

.50

Center

€

342

.00

Right

$

45

/mo

<%= pb_rails("currency", props: {
  amount: "2,000.50",
  label: "Left",
  size: "sm",
}) %>

<%= pb_rails("currency", props: {
  align: "center",
  amount: "342",
  label: "Center",
  size: "sm",
  symbol: "€",
}) %>

<%= pb_rails("currency", props: {
  align: "right",
  amount: "45",
  label: "Right",
  unit: "/mo",
  size: "sm",
}) %>

No Symbol

Sales

309

/week

<%= pb_rails("currency", props: {
  amount: "309",
  label: "Sales",
  size: "md",
  symbol: "",
  unit: "/week"
}) %>

Abbreviate Larger Amounts

Thousands (with Unit)

$

2.2

K/mo

Millions

$

3.42

M

Billions

$

45.3

B

Trillions

$

983

T

<%= pb_rails("currency", props: {
  abbreviate: true,
  amount: "2,200.50",
  label: "Thousands (with Unit)",
  margin_bottom: "md",
  unit: "/mo",
}) %>

<%= pb_rails("currency", props: {
  abbreviate: true,
  amount: "3424123",
  label: "Millions",
  margin_bottom: "md",
}) %>

<%= pb_rails("currency", props: {
  abbreviate: true,
  amount: "45,300,000,000",
  label: "Billions",
  margin_bottom: "md",
}) %>

<%= pb_rails("currency", props: {
  abbreviate: true,
  amount: "983,200,000,000,000",
  label: "Trillions",
}) %>

Matching Decimals

Small

$

372.12

/day

Medium

€

30,327.43

Large

$

621,953.99

<%= pb_rails("currency", props: {
  amount: "372.12",
  decimals: "matching",
  label: "Small",
  margin_bottom: "md",
  size: "sm",
  unit: "/day",
}) %>

<%= pb_rails("currency", props: {
  amount: "30,327.43",
  decimals: "matching",
  label: "Medium",
  margin_bottom: "md",
  size: "md",
  symbol: "€",
}) %>

<%= pb_rails("currency", props: {
  amount: "621,953.99",
  decimals: "matching",
  label: "Large",
  size: "lg",
}) %>

Dashboard Value

Full Example

Decreased Value

1,428 appts

26.1%

Increased Value

938 homes

56.1%

Neutral Value

261 windows

86%

Pitch Rate

90.9 %

<%= pb_rails("dashboard_value", props: {
  stat_label: "Decreased Value",
  stat_value: { value: 1428, unit: "appts" },
  stat_change: { change: "decrease", value: 26.1 }
}) %>

<br><br>

<%= pb_rails("dashboard_value", props: {
  stat_label: "Increased Value",
  stat_value: { value: 938, unit: "homes" },
  stat_change: { change: "increase", value: 56.1 }
}) %>

<br><br>

<%= pb_rails("dashboard_value", props: {
  stat_label: "Neutral Value",
  stat_value: { value: 261, unit: "windows" },
  stat_change: { value: 86 }
}) %>

<br><br>

<%= pb_rails("dashboard_value", props: {
  stat_label: "Pitch Rate",
  stat_value: { value: 90.9, unit: "%" }
}) %>

Align

Top Title Value

1,428 appts

26.1%

Top Title Value

1,428 appts

56%

Top Title Value

1,428 appts

86.1%

<%= pb_rails("dashboard_value", props: {
  stat_label: "Top Title Value",
  stat_value: {value: 1428, unit: "appts"},
  stat_change: {change: "decrease", value: 26.1}
}) %>

<br><br>

<%= pb_rails("dashboard_value", props: {
  align: "center",
  stat_label: "Top Title Value",
  stat_value: {value: 1428, unit: "appts"},
  stat_change: {change: "decrease", value: 56 }
}) %>

<br><br>

<%= pb_rails("dashboard_value", props: {
  align: "right",
  stat_label: "Top Title Value",
  stat_value: {value: 1428, unit: "appts"},
  stat_change: {change: "decrease", value: 86.1 }
}) %>

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382

H#8250263

PHL

Use this kit on tables, card displays, or on modals. It's versatile for displaying in the most condensed areas.

<%= pb_rails("home_address_street", props: {
  address: "70 Prospect Ave",
  address_cont: "Apt M18",
  city: "West Chester",
  home_id: 8250263,
  home_url: "https://powerhrg.com/",
  house_style: "Colonial",
  state: "PA",
  zipcode: "19382",
  territory: "PHL",
}) %>

Emphasis

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382

H#8250263

PHL

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382

H#8250263

PHL

Emphasis on street happens by default. (no prop needed)
Emphasis on "city" makes the city emphasized, rather than the street.

<%= pb_rails("home_address_street", props: {
  address: "70 Prospect Ave",
  address_cont: "Apt M18",
  city: "West Chester",
  home_id: 8250263,
  home_url: "https://powerhrg.com/",
  house_style: "Colonial",
  state: "PA",
  zipcode: "19382",
  territory: "PHL",
}) %>

<br>
<br>

<%= pb_rails("home_address_street", props: {
  address: "70 Prospect Ave",
  address_cont: "Apt M18",
  city: "West Chester",
  emphasis: "city",
  home_id: 8250263,
  home_url: "https://powerhrg.com/",
  house_style: "Colonial",
  state: "PA",
  zipcode: "19382",
  territory: "PHL",
}) %>

Modified

70 Prospect Ave

West Chester, PA 19382

PHL

<%= pb_rails("home_address_street", props: {
  address: "70 Prospect Ave",
  city: "West Chester",
  state: "PA",
  zipcode: "19382",
  territory: "PHL",
}) %>

Link

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382

H#8250263

PHL

Use the newWindow / new_window prop to control whether the link opens on the same page or a new tab (same page is the default behavior)

<%= pb_rails("home_address_street", props: {
  address: "70 Prospect Ave",
  address_cont: "Apt M18",
  city: "West Chester",
  home_id: 8250263,
  home_url: "https://powerhrg.com/",
  house_style: "Colonial",
  new_window: true,
  state: "PA",
  zipcode: "19382",
  territory: "PHL",
}) %>

Label Pill

Default

Service Needed

76

Waiting

69

In Service

28

Fully Serviced

101

Inbox

197

Outbox

13

Inbox

218

Use this kit to display a label and a value with a certain status or color to highlight its significance or meaning. It can be a good design use to highlight the value incase it is important.

<%= pb_rails("label_pill", props: {
  label: "Service Needed",
  pill_value: "76",
}) %>

<%= pb_rails("label_pill", props: {
  label: "Waiting",
  pill_value: "69",
  variant: "success"
}) %>

<%= pb_rails("label_pill", props: {
  label: "In Service",
  pill_value: "28",
  variant: "error"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Fully Serviced",
  pill_value: "101",
  variant: "warning"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Inbox",
  pill_value: "197",
  variant: "info"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Outbox",
  pill_value: "13",
  variant: "neutral"
}) %>

<%= pb_rails("label_pill", props: {
  label: "Inbox",
  pill_value: "218",
  variant: "primary"
}) %>

Label Value

Default

Role

Administrator, Moderator

Email

anna.black@powerhrg.com

Bio

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.

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

<%= pb_rails("label_value", props: {
  label: "Role",
  value: "Administrator, Moderator"
}) %>

<br>

<%= pb_rails("label_value", props: {
  label: "Email",
  value: "anna.black@powerhrg.com"
}) %>

<br>

<%= pb_rails("label_value", props: {
  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."
}) %>

Details

Installer

JD Installations LLC

Project

33-12345

Jefferson-Smith

Project

33-12345

Jefferson-Smith

· 11/18

Project

33-12345

Jefferson-Smith

· 11/18

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

<%= pb_rails("label_value", props: {
  variant: "details",
  label: "Installer",
  icon: "truck",
  title: "JD Installations LLC",
}) %>

<br>

<%= pb_rails("label_value", props: {
  variant: "details",
  label: "Project",
  icon: "home",
  description: "33-12345",
  title: "Jefferson-Smith",
}) %>

<br>

<%= pb_rails("label_value", props: {
  variant: "details",
  label: "Project",
  icon: "home",
  description: "33-12345",
  title: "Jefferson-Smith",
  date: Date.new(2019, 11, 18)
}) %>

<br>

<%= pb_rails("label_value", props: {
  variant: "details",
  active: true,
  label: "Project",
  icon: "home",
  description: "33-12345",
  title: "Jefferson-Smith",
  date: Date.new(2019, 11, 18)
}) %>

Other Examples

Patient Profile

Age

24 yrs old

Weight

91 kg

Blood

A +

Height

187 cm

Workout Schedule

Chest

6 sets • 8 reps • 40-100 kg

Bench Press

Biceps

5 sets • 12 reps • 20-40 kg

Barbell Curl

Back

8 sets • 8 reps • 40-120 kg

Back Squat

<%= pb_rails("title", props: { text: "Patient Profile", tag: "h4", size: 4, margin_bottom: "sm" }) %> 

<%= pb_rails("flex") do %>
  <%= pb_rails("flex", props: {orientation: "column", margin_right: "lg" }) do %>

    <%= pb_rails("label_value", props: {
      variant: "details",
      label: "Age",
      icon: "user",
      title: "24 yrs old",
      padding_bottom: "sm"
    }) %>
    <%= pb_rails("label_value", props: {
      variant: "details",
      label: "Weight",
      icon: "weight",
      title: "91 kg",
    }) %>

  <% end %>
  <%= pb_rails("flex", props: {orientation: "column"}) do %>

    <%= pb_rails("label_value", props: {
      variant: "details",
      label: "Blood",
      icon: "tint",
      title: "A +",
      padding_bottom: "sm"
    }) %>
    <%= pb_rails("label_value", props: {
      variant: "details",
      label: "Height",
      icon: "arrows-v",
      title: "187 cm",
    }) %>

  <% end %>
<% end %>

<br><br><br>

<%= pb_rails("title", props: { text: "Workout Schedule", tag: "h4", size: 4, margin_bottom: "sm" }) %> 

<%= pb_rails("label_value", props: {
  variant: "details",
  label: "Chest",
  icon: "dumbbell",
  description: "6 sets • 8 reps • 40-100 kg",
  title: "Bench Press",
  padding_bottom: "sm",
  active: true
}) %>

<%= pb_rails("label_value", props: {
  variant: "details",
  label: "Biceps",
  icon: "dumbbell",
  description: "5 sets • 12 reps • 20-40 kg",
  title: "Barbell Curl",
  padding_bottom: "sm",
  active: true
}) %>

<%= pb_rails("label_value", props: {
  variant: "details",
  label: "Back",
  icon: "dumbbell",
  description: "8 sets • 8 reps • 40-120 kg",
  title: "Back Squat",
  padding_bottom: "sm",
  active: true
}) %>

Message

Default

Anna Black

20 seconds ago

How can we assist you today?

Patrick Welch

9 minutes ago

We'll escalate this issue to a Senior Support agent.

Lucille Sanchez

4 hours ago

Application for Kate Smith is waiting for your approval

Beverly Reyes

2 days ago

We're so sorry you had a bad experience!

Keith Craig

2 days ago

Please hold for one moment, I'll check with my manager.

2 days ago

We're so sorry you had a bad experience!

2 days ago

2 days ago

Please hold for one moment, I'll check with my manager.

Use this kit when displaying a message or a sort of communication with either a user or a bot. Use it in history displays, chat rooms, discussion threads or comments section.

<%= pb_rails("message", props: {
  label: "Anna Black",
  message: "How can we assist you today?",
  timestamp: "20 seconds ago",
  avatar_name: "Mike Bishop",
  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
  avatar_status: "online"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Patrick Welch",
  message: "We'll escalate this issue to a Senior Support agent.",
  timestamp: "9 minutes ago",
  avatar_name: "Wade Winningham",
  avatar_url: "https://randomuser.me/api/portraits/men/14.jpg",
  align_timestamp: "left"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Lucille Sanchez",
  message: "Application for Kate Smith is waiting for your approval",
  timestamp: "4 hours ago",
  avatar_name: "Becca Jacobs",
  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Beverly Reyes",
  message: "We're so sorry you had a bad experience!",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "Keith Craig",
  message: "Please hold for one moment, I'll check with my manager.",
  timestamp: "2 days ago"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  message: "We're so sorry you had a bad experience!",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) do %>
  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<% end %>

<br><br>

<%= pb_rails("message", props: {
  label: "",
  message: "Please hold for one moment, I'll check with my manager.",
  timestamp: "2 days ago",
  avatar_name: "Tim Wenhold"
}) do %>
  <%= pb_rails("image", props: { alt: "picture of a misty forest", size: "xl", url: "https://unsplash.it/500/400/?image=634" }) %>
<% end %>

With Timestamp Hover

Anna Black

4 hours ago

Jun 5 · 5:02p

Hover over me to check out the real time I was made!

Becca Jacobs

12.20p

Jun 5 · 5:02p

Application for Kate Smith is waiting for your approval

<%= pb_rails("message", props: {
  label: "Anna Black",
  message: "Hover over me to check out the real time I was made!",
  timestamp: "4 hours ago",
  timestamp_object: DateTime.current,
  avatar_name: "Lisa Thompson",
  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>
<br><br>
<%= pb_rails("message", props: {
  label: "Becca Jacobs",
  message: "Application for Kate Smith is waiting for your approval",
  timestamp: "12.20p",
  align_timestamp: "left",
  timestamp_object: DateTime.current,
  avatar_name: "Lisa Thompson",
  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>

Person

Default

Kyle

Fadigan

Use this kit to display users, homeowners, or person of contact.

<%= pb_rails("person", 
    props: { 
      first_name: "Kyle", 
      last_name: "Fadigan" 
      }) %>

Person Contact

Default

Pauline

Smith

email@example.com

(555) 555-5555

(324) 562-7482

<%= pb_rails("person_contact", props: {
  first_name: "Pauline",
  last_name: "Smith",
  contacts: [
    {
      contact_type: "email",
      contact_value: "email@example.com"
    },
    {
      contact_value: 5555555555
    },
    {
      contact_type: "work",
      contact_value: "3245627482"
    }
  ]
}) %>

Multiple People

Harvey

Walters

email@example.com

(555) 555-5555

(324) 562-7482

Brenda

Walters

(555) 555-5555

<%= pb_rails("person_contact", props: {
  first_name: "Harvey",
  last_name: "Walters",
  contacts: [
    {
      contact_type: "email",
      contact_value: "email@example.com"
    },
    {
      contact_value: 5555555555,
    },
    {
      contact_type: "work",
      contact_value: "3245627482"
    }
  ]
}) %>

<%= pb_rails("person_contact", props: {
  first_name: "Brenda",
  last_name: "Walters",
  contacts: [
    {
      contact_value: 5555555555,
    }
  ]
}) %>

With Detail

Harvey

Walters

email@example.com

(555) 555-5555 Home

(324) 562-7482 Work

<%= pb_rails("person_contact", props: {
  first_name: "Harvey",
  last_name: "Walters",
  contacts: [
    {
      contact_type: "email",
      contact_value: "email@example.com"
    },
    {
      contact_value: 5555555555,
      contact_detail: "Home"
    },
    {
      contact_type: "work",
      contact_value: "3245627482",
      contact_detail: "Work"
    }
  ]
}) %>

With Wrong Numbers

Pauline

Smith

email@example.com

(555) 555-5555

(304) 861-5385

wrong number

(324) 562-7482

<%= pb_rails("person_contact", props: {
  first_name: "Pauline",
  last_name: "Smith",
  contacts: [
    {
      contact_type: "email",
      contact_value: "email@example.com",
    },
    {
      contact_value: 5555555555
    },
    {
      contact_type: "wrong-phone",
      contact_value: "3245627482",
    },
    {
      contact_type: "phone",
      contact_value: "3048615385",
    },
  ]
}) %>

Source

Default

BJ's Johnston-208

Retail

Referral-phrg

Inbound

BJ's Future CB

Anna Black

48582

<%= pb_rails("source", props: {
  source: "BJ's Johnston-208",
  type: "retail"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "Referral-phrg",
  type: "inbound"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "BJ's Future CB",
  type: "user",
  user: {
    name: "Anna Black",
    image: {
      url: "https://randomuser.me/api/portraits/women/44.jpg"
    },
    user_id: "48582"
  }
}) %>

Hide Icon

BJ's Johnston-208

Retail

Referral-phrg

Inbound

BJ's Future CB

Anna Black

48582

<%= pb_rails("source", props: {
  source: "BJ's Johnston-208",
  type: "retail",
  hide_icon: true
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "Referral-phrg",
  type: "inbound",
  hide_icon: true
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "BJ's Future CB",
  type: "user",
  user: {
    name: "Anna Black",
    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
    user_id: "48582"
  },
  hide_icon: true
}) %>

Source Types

BJ's Johnston-208

Retail

Referral-phrg

Inbound

B.B.B. Outbound

Outbound

Contractor.com

Prospecting

Beards, Beers and Brats

Events

BJ's Johnston-208

Referral

Employee Referral

Anna Black

48582

BJ's Future CB

Anna Black

48582

<%= pb_rails("source", props: {
  source: "BJ's Johnston-208",
  type: "retail"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "Referral-phrg",
  type: "inbound"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "B.B.B. Outbound",
  type: "outbound"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "Contractor.com",
  type: "prospecting"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "Beards, Beers and Brats",
  type: "events"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "BJ's Johnston-208",
  type: "referral"
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "Employee Referral",
  type: "referral",
  user: {
    name: "Anna Black",
    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
    user_id: "48582"
  }
}) %>

<br><br>

<%= pb_rails("source", props: {
  source: "BJ's Future CB",
  type: "user",
  user: {
    name: "Anna Black",
    image: {url: "https://randomuser.me/api/portraits/women/44.jpg"},
    user_id: "48582"
  }
}) %>

Stat Change

Default

28.4%

6.1%

102%

<%= pb_rails("stat_change", props: {
  change: "increase",
  value: 28.4,
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "decrease",
  value: 6.1
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "neutral",
  value: 102
}) %>

Icon

28.4%

6.1%

102%

<%= pb_rails("stat_change", props: {
  value: 28.4,
  icon: "chart-line",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  value: 6.1,
  icon: "chart-line-down",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  value: 102,
}) %>

Colors

28.4%

6.1%

102%

Increase colors your icon GREEN & Decrease colors your icon RED.

<%= pb_rails("stat_change", props: {
  change: "increase",
  value: 28.4,
  icon: "level-up",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "decrease",
  value: 6.1,
  icon: "level-down",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "neutral",
  value: 102,
}) %>

Stat Value

Default

1,048

10.48

Use this as value for displaying number data at a high level. It’s primary function is to create hierarchy of data within a view.

<%= pb_rails("stat_value", props: { value: 1048 }) %>

<%= pb_rails("stat_value", props: { value: 10.48 }) %>

Unit Value

5,294 appt

<%= pb_rails("stat_value", props: { value: 5294, unit: "appt" }) %>

Precision Value

1,529.00

1,529.1300

Use this to specify how many decimal places you want to show.
In react, you can pass in a string or number, but for this rails kit, we only accept numeric values and rails will not show trailing zero's unless specified.

<%= pb_rails("stat_value", props: { value: 1529.00000, precision: 2 }) %>

<%= pb_rails("stat_value", props: { value: 1529.13, precision: 4 }) %>

Title Count

Default

Appointments

35.78

Appointments

7,399

Appointments

-379,503.372

Use this kit as a form of label value only for a numeric value.

<%= pb_rails("title_count", props: {
  title: "Appointments",
  count: 35.78
}) %>

<br>

<%= pb_rails("title_count", props: {
  title: "Appointments",
  count: 7399,
  size: "lg"
}) %>

<br>

<%= pb_rails("title_count", props: {
  title: "Appointments",
  count: -379503.3720,
  size: "lg"
}) %>

Align

Remodeling Consultants

527

Remodeling Consultants

527

Remodeling Consultants

527

<%= pb_rails("title_count", props: {
  title: "Remodeling Consultants",
  count: 527
}) %>

<br>

<%= pb_rails("title_count", props: {
  title: "Remodeling Consultants",
  count: 527,
  align: "center"
}) %>

<br>

<%= pb_rails("title_count", props: {
  title: "Remodeling Consultants",
  count: 527,
  align: "right"
}) %>

Title Detail

Default

Email Notifications

Commits data and history

Email Notifications

Commits data and history

Email Notifications

Commits data and history

Use this kit in tables and cards to display data that doesn’t have a caption assigned.

<%= pb_rails("title_detail", props: {
  title: "Email Notifications",
  detail: "Commits data and history"
}) %>

<%= pb_rails("title_detail", props: {
  title: "Email Notifications",
  detail: "Commits data and history",
  align: "center"
}) %>

<%= pb_rails("title_detail", props: {
  title: "Email Notifications",
  detail: "Commits data and history",
  align: "right"
}) %>

Typography Patterns

Contact

Currency

2,000

342

45

2,000

342

45

2,000

342

45

309

2.2

3.42

45.3

983

372.12

30,327.43

621,953.99

Dashboard Value

Home Address Street

70 Prospect Ave · Colonial

Apt M18

70 Prospect Ave · Colonial

Apt M18

70 Prospect Ave

70 Prospect Ave · Colonial

Apt M18

Label Pill

Label Value

JD Installations LLC

Jefferson-Smith

Jefferson-Smith

Jefferson-Smith

Patient Profile

24 yrs old

91 kg

A +

187 cm

Workout Schedule

Bench Press

Barbell Curl

Back Squat

Message

Anna Black

Patrick Welch

Lucille Sanchez

Beverly Reyes

Keith Craig

Anna Black

Becca Jacobs

Person

Fadigan

Person Contact

Smith

Walters

Walters

Walters

Smith

Source

BJ's Johnston-208

Referral-phrg

BJ's Future CB

BJ's Johnston-208

Referral-phrg

BJ's Future CB

BJ's Johnston-208

Referral-phrg

B.B.B. Outbound

Contractor.com

Beards, Beers and Brats

BJ's Johnston-208

Employee Referral

BJ's Future CB

Stat Change

Stat Value

Title Count

Appointments

Appointments