2.9.7


Principles

Kits

Tokens


Kits

RailsReact

Avatar

Default






Close
<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "xs",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "md",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "offline"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "lg",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

<br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "xl",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>
Monogram


Close
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg" }) %>
<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl" }) %>
Status





Close
<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg"
  }) %>

<br>

  <%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "online"
  }) %>

  <br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "away"
  }) %>

  <br>

<%= pb_rails("avatar", props: {
    name: "Terry Johnson",
    size: "sm",
    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
    status: "offline"
  }) %>

Badge

Rectangle

+1
+4
+1000

Close
<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "primary"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "primary"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "primary"
  }) %>
</div>
Rounded

+1
+4
+1000

Close
<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "primary",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "primary",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "primary",
    rounded: true
  }) %>
</div>
Colors

+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000
+1
+4
+1000

Close
<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "primary",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "primary"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "primary",
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "success",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "success"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "success"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "warning",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "warning"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "warning"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "error",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "error"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "error"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    variant: "info",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "info"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "info"
  }) %>
</div>

<div>
  <%= pb_rails("badge", props: {
    text: "+1",
    rounded: true
  }) %>

  <%= pb_rails("badge", props: {
    text: "+4",
    variant: "neutral"
  }) %>

  <%= pb_rails("badge", props: {
    text: "+1000",
    variant: "neutral"
  }) %>
</div>

Bar Graph

Default


Close
<% data = [{
    name: 'Installation',
    data: [154175]
}, {
    name: 'Manufacturing',
    data: [40434]
}, {
    name: 'Sales & Distribution',
    data: [39387]
}, {
    name: 'Project Development',
    data: [34227]
}, {
    name: 'Other',
    data: [18111]
}] %>

<%= pb_rails("bar_graph", props: {
    axis_title: 'Number of Employees',
    chart_data: data,
    id: "bar-test",
    point_start: 2012,
    subtitle: 'Source: thesolarfoundation.com',
    title: 'Solar Employment Growth by Sector, 2010-2016'
}) %>

Body

Light UI

I am a body kit
I am a body kit (Light)
I am a body kit (Lighter)
I am a body kit (Status: negative)
I am a body kit (Status: positive)

Close
<%= pb_rails("body", props: {
  text: "I am a body kit"
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Light)",
  color: "light"
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Lighter)",
  color: "lighter"
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Status: negative)",
  status: "negative"
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Status: positive)",
  status: "positive"
}) %>
Dark UI

I am a body kit
I am a body kit (Light)
I am a body kit (Lighter)
I am a body kit (Status: negative)
I am a body kit (Status: positive)

Close
<%= pb_rails("body", props: {
  text: "I am a body kit",
  dark: true
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Light)",
  color: "light",
  dark: true
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Lighter)",
  color: "lighter",
  dark: true
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Status: negative)",
  status: "negative",
  dark: true
}) %>

<%= pb_rails("body", props: {
  text: "I am a body kit (Status: positive)",
  status: "positive",
  dark: true
}) %>
Block

I am body kit

Close
<%= pb_rails("body") do %>
  I am body kit
<% end %>

Button

Button Variants


Close
<%= pb_rails("button", props: { text: "Button Primary" }) %>
<%= pb_rails("button", props: { text: "Button Secondary", variant: "secondary" }) %>
<%= pb_rails("button", props: { text: "Button Link", variant: "link" }) %>
<%= pb_rails("button", props: { text: "Button Disabled", disabled: true }) %>
Button Variants Dark


Close
<%= pb_rails("button", props: { 
    text: "Button Primary",
    dark: true 
}) %>

<%= pb_rails("button", props: { 
    text: "Button Secondary", 
    variant: "secondary", 
    dark: true 
}) %>

<%= pb_rails("button", props: { 
    text: "Button Link", 
    variant: "link",
    dark: true
}) %>

<%= pb_rails("button", props: { 
    text: "Button Disabled",
    disabled: true,
    dark: true
}) %>
Button Full Width


Close
<%= pb_rails("button", props: { text: "Button Full Width", full_width: true }) %>
Button Links

A Tag Button Open in new Window A Tag Button Disabled
Close
<%= pb_rails("button", props: { text: "A Tag Button", tag: "a", link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "Open in new Window", new_window: true, link: "http://google.com" }) %>
<%= pb_rails("button", props: { text: "A Tag Button Disabled", disabled: true, link: "http://google.com" }) %>
Button Loading


Close
<%= pb_rails("button", props: { text: "Button Primary", loading: true }) %>
<%= pb_rails("button", props: { text: "Button Primary", variant: "secondary", loading: true }) %>
<%= pb_rails("button", props: { text: "Button Primary", variant: "link", loading: true }) %>
Button Block Content


Close
<%= pb_rails("button") do %>
  <%= pb_rails("icon", props: { icon: "users", fixed_width: true }) %>
  <span>Button with Block Content</span>
<% end %>
Button Accessibility Options

Button with ARIA
Close
<%= pb_rails("button", props: { text: "Button with ARIA", aria: {label: "button"}, tag: "a", link: "http://google.com" }) %>
Button Additional Options


Close
<%= pb_rails("button", props: { text: "Button with options", value: "1234", type: "submit" }) %>

Caption

Light UI

Caption
Caption Large
Subcaption

Close
<%= pb_rails("caption", props: { text: "Caption" }) %>
<%= pb_rails("caption", props: { text: "Caption Large", size: 'lg' }) %>
<%= pb_rails("caption", props: { text: "Subcaption", size: 'xs' }) %>
Dark UI

Caption
Caption Large
Subcaption

Close
<%= pb_rails("caption", props: { text: "Caption", dark: true }) %>
<%= pb_rails("caption", props: { text: "Caption Large", size: 'lg', dark: true  }) %>
<%= pb_rails("caption", props: { text: "Subcaption", size: 'xs', dark: true  }) %>

Card

Default

Card content

Close
<%= pb_rails("card") do %>
  Card content
<% end %>
Selected

Card content

Card content

Close
<%= pb_rails("card") do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {selected: true}) do %>
  Card content
<% end %>
Padding Size

Card content

Card content

Card content

Card content

Card content

Close
<%= pb_rails("card", props: {padding: "none"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {padding: "xs"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {padding: "md"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {padding: "lg"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {padding: "xl"}) do %>
  Card content
<% end %>
Shadow Size

Card content

Card content

Card content

Card content

Card content

Card content

Close
<%= pb_rails("card", props: {shadow: "none"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {shadow: "shallow"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {shadow: "default"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {shadow: "deep"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {shadow: "deeper"}) do %>
  Card content
<% end %>

<br>

<%= pb_rails("card", props: {shadow: "deepest"}) do %>
  Card content
<% end %>
Content Size

Card content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.

Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.

Close
<%= pb_rails("card") do %>
  Card content
<% end %>

<br>

<%= pb_rails("card") do %>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, risus a fringilla luctus, sapien eros sodales ex, quis molestie est nulla non turpis. Vestibulum aliquet at ipsum eget posuere. Morbi sed laoreet erat. Sed commodo posuere lectus, at porta nulla ornare a. Suspendisse quam est, sollicitudin ut enim sit amet, commodo placerat enim. Donec laoreet metus ac mauris pellentesque mattis. Pellentesque luctus vel mauris non aliquam. Mauris hendrerit mattis porttitor. Curabitur vehicula justo non ex consectetur commodo. Quisque posuere aliquet quam. Maecenas malesuada magna mauris, ac tempor metus euismod at.
<br><br>
Cras ornare fermentum magna mollis efficitur. Sed vitae nulla vel purus ultrices mollis. Maecenas id nulla id libero faucibus feugiat quis sit amet turpis. In commodo pellentesque risus at fringilla. Integer non interdum leo, non commodo ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mi augue, dignissim at orci vel, egestas aliquam mi. Proin finibus aliquet tempor. Integer cursus, ex quis gravida rhoncus, nisi elit viverra ipsum, non efficitur est ex ac tortor. Praesent vitae odio massa.
<% end %>

Checkbox

Default


Close
<%= pb_rails("checkbox" , props: {
  text: "Checkbox Label",
  value: "checkbox-value",
  name: "checkbox-name"
}) %>
Load as checked


Close
<%= pb_rails("checkbox" , props: {
  text: "Checked Checkbox",
  value: "checkbox-value",
  checked: true,
  name: "checkbox-name"
}) %>
Dark


Close
<%= pb_rails("checkbox", props: {
  text: "Checkbox Label" ,
  dark: true
}) %>

Contact

Default

(349) 185-9988
(555) 555-5555
email@example.com
(324) 562-7482

Close
<%= 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",
}) %>
Detail Indicator

(349) 185-9988 Cell
(555) 555-5555 Home
(324) 562-7482 Work

Close
<%= 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",
}) %>

Currency

Small

Caption
$

2,000.

00
Caption
$

2,000.

00
Caption
$

2,000.

00

Close
<%= pb_rails("currency", props: {
  dollar_sign: "$",
  label: "Caption",
  value: "2,000.",
  unit: "00",
  size: "sm"
}) %>

<%= pb_rails("currency", props: {
  align: "center",
  dollar_sign: "$",
  label: "Caption",
  value: "2,000.",
  unit: "00",
  size: "sm"
}) %>

<%= pb_rails("currency", props: {
  align: "right",
  dollar_sign: "$",
  label: "Caption",
  value: "2,000.",
  unit: "00",
  size: "sm"
}) %>
Large

Caption
$

2,000.

00
Caption
$

2,000.

00
Caption
$

2,000.

00

Close
<%= pb_rails("currency", props: {
  dollar_sign: "$",
  label: "Caption",
  value: "2,000.",
  unit: "00",
  size: "lg"
}) %>

<%= pb_rails("currency", props: {
  align: "center",
  dollar_sign: "$",
  label: "Caption",
  value: "2,000.",
  unit: "00",
  size: "lg"
}) %>

<%= pb_rails("currency", props: {
  align: "right",
  dollar_sign: "$",
  label: "Caption",
  value: "2,000.",
  unit: "00",
  size: "lg"
}) %>

Dashboard Value

Full Example

Decreased Value

1428

 

appts

26.1%


Increased Value

938

 

homes

56.1%


Neutral Value

261

 

windows

86%

Close
<%= 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}
}) %>
Align

Top Title Value

1428

 

appts

26.1%


Top Title Value

1428

 

appts

56%


Top Title Value

1428

 

appts

86.1%

Close
<%= 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 }
}) %>

Date

Default

NOV 12


TUE · NOV 12

THU · AUG 2


Close
<%= pb_rails("date", props: {
  date: Date.today,
  size: "lg"
}) %>

<br>

<%= pb_rails("date", props: {
  date: DateTime.now
}) %>

<br>

<%= pb_rails("date", props: {
  date: "2012-08-02T15:49:29Z",
  size: "xs"
}) %>

Date Range Inline

Default


Close
<%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>

Date Year Stacked

Default

12 NOV

2019


12 NOV

2019


12 NOV

2019

Close
<%= pb_rails "date_year_stacked", props: { date: Date.today } %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center'} %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right'} %>
Dark

12 NOV

2019


12 NOV

2019


12 NOV

2019

Close
<%= pb_rails "date_year_stacked", props: { date: Date.today, dark: true } %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center', dark: true } %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right', dark: true } %>

Distribution Bar

Default




Close
<%= pb_rails("distribution_bar", props: {
  widths: [1,2,3,4,5,3,3,7]
}) %>

<br><br>
<%= pb_rails("distribution_bar", props: {
  widths: [1,2,3,4,5,3,3,7],
  size: "sm"
}) %>

Fixed Confirmation Toast

Default

Error Message



Items Successfully Moved



Scan to Assign Selected Items


Close
<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Error Message",
  status: "error"
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Items Successfully Moved",
  status: "success"
})%>

<br><br>

<%= pb_rails("fixed_confirmation_toast", props: {
  text: "Scan to Assign Selected Items",
  status: "neutral"
})%>

Hashtag

Hashtag Types

P#470297


H#123456


#123456

Close
<%= pb_rails("hashtag", props: {text: "470297", url: "https://google.com", type: "project"}) %>

<br/><br/>

<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "home"}) %>

<br/><br/>

<%= pb_rails("hashtag", props: {text: "123456", url: "https://google.com", type: "default"}) %>

Home Address Street

Default

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382
H#8250263 PHL

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

70 Prospect Ave

West Chester, PA 19382
PHL

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

70 Prospect Ave · Colonial

Apt M18

West Chester, PA 19382
H#8250263 PHL

Close
<%= pb_rails("home_address_street", props: {
  address: "70 Prospect Ave",
  address_cont: "Apt M18",
  city: "West Chester",
  home_id: 8250263,
  house_style: "Colonial",
  state: "PA",
  zipcode: "19382",
  territory: "PHL",
  dark: true,
}) %>

Icon

Icon Default


Close
<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>
Icon Rotate


Close
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 90, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 180, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "user", fixed_width: true, rotation: 270, size: "2x" }) %>
Icon Flip


Close
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "horizontal", size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "vertical", size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "question-circle", fixed_width: true, flip: "both", size: "2x" }) %>
Icon Animation

Spin


Pulse


Close
<p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
<br/>
<p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
Icon Pull


Close
<%= pb_rails("icon", props: { icon: "arrow-left", pull: "left", fixed_width: true, size: "2x" }) %>
<%= pb_rails("icon", props: { icon: "arrow-right", pull: "right", fixed_width: true, size: "2x" }) %>
Icon Border


Close
<%= pb_rails("icon", props: { icon: "user", border: true, fixed_width: true, size: "2x" }) %>
Icon Sizes

Large

Small

XSmall



1x

2x

3x

4x

5x

6x

7x

8x

9x

10x


Close
<p><%= pb_rails("icon", props: { icon: "user", size: "lg" }) %> <span>Large</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "sm" }) %> <span>Small</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "xs" }) %> <span>XSmall</span></p>

<br/><br/>

<p><%= pb_rails("icon", props: { icon: "user", size: "1x" }) %> <span>1x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "2x" }) %> <span>2x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "3x" }) %> <span>3x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "4x" }) %> <span>4x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "5x" }) %> <span>5x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "6x" }) %> <span>6x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "7x" }) %> <span>7x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "8x" }) %> <span>8x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "9x" }) %> <span>9x</span></p>
<p><%= pb_rails("icon", props: { icon: "user", size: "10x" }) %> <span>10x</span></p>
Icon Default Dark


Close
<%= pb_rails("icon", props: { icon: "user", fixed_width: true }) %>

Icon Circle

Default


Close
<%= pb_rails("icon_circle", props: {
  icon: "user"
}) %>
Size


Close
<%= pb_rails("icon_circle", props: {
  icon: "comment",
  size: "xs"
}) %>

<%= pb_rails("icon_circle", props: {
  icon: "comment",
  size: "sm"
}) %>

<%= pb_rails("icon_circle", props: {
  icon: "comment",
  size: "md"
}) %>

<%= pb_rails("icon_circle", props: {
  icon: "comment",
  size: "lg"
}) %>

<%= pb_rails("icon_circle", props: {
  icon: "comment",
  size: "xl"
}) %>
Color


Close
<%= pb_rails("icon_circle", props: {
  icon: "comment",
  variant: "royal",
  size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
  icon: "archive",
  variant: "blue",
  size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
  icon: "arrow-alt-right",
  variant: "purple",
  size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
  icon: "cloud",
  variant: "teal",
  size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
  icon: "award",
  variant: "red",
  size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
  icon: "bolt",
  variant: "yellow",
  size: "sm"
}) %>
<%= pb_rails("icon_circle", props: {
  icon: "calendar",
  variant: "green",
  size: "sm"
}) %>

Icon Value

Default

93

5

15m

Close
<%= pb_rails("icon_value", props: {
  icon: "heart",
  text: "93"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "comment",
  text: "5"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "clock",
  text: "15m"
}) %>
Align

93

5

15m

Close
<%= pb_rails("icon_value", props: {
  icon: "heart",
  text: "93"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "comment",
  text: "5",
  align: "center"
}) %>

<br>

<%= pb_rails("icon_value", props: {
  icon: "clock",
  text: "15m",
  align: "right"
}) %>

Image

Default


Close
<%= pb_rails("image", props: { url: "https://unsplash.it/500/400/?image=634" }) %>

Label Pill

Default

Service Needed

76

Waiting

69

In Service

28

Fully Serviced

198

Inbox

198

Outbox

198


Close
<%= 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: "198",
  variant: "warning"
}) %>

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

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

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.

Close
<%= 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."
}) %>

Layout

Extra Small

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "xs", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Small

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "sm", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Medium

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "md", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Large

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "lg", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Extra Large

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "xl", collapse: "sm"}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Extra Small Dark

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "xs", collapse: "sm", dark: true}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Small Dark

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "sm", collapse: "sm", dark: true}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Medium Dark

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "md", collapse: "sm", dark: true}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Large Dark

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "lg", collapse: "sm", dark: true}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>
Extra Large Dark

Side
Body

Close
<%= pb_rails("layout", props: {position: "left", transparent: false, size: "xl", collapse: "sm", dark: true}) do %>
  <%= pb_rails("layout/sidebar") do %> Side <% end %>
  <%= pb_rails("layout/body") do %> Body <% end %>
<% end %>

Line Graph

Default


Close
<% data = [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}] %>

<%= pb_rails("line_graph", props: { id: "line-test", gradient: false, chart_data: data, point_start: 1, title: 'Solar Employment Growth by Sector, 2010-2016', subtitle: 'Source: thesolarfoundation.com', axis_title: 'Number of Employees' }  ) %>

List

Default

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Large

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, size: "large"}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Ordered

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

Close
<%= pb_rails("list", props: {ordered: true, dark: false, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Borderless

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Horizontal Padding

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: false, borderless: false, xpadding: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Dark Default

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Dark Large

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, size: "large"}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Dark Ordered

  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

Close
<%= pb_rails("list", props: {ordered: true, dark: true, borderless: false}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Dark Borderless

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>
Dark Horizontal Padding

  • List Item
  • List Item
  • List Item
  • List Item
  • List Item

Close
<%= pb_rails("list", props: {ordered: false, dark: true, borderless: false, xpadding: true}) do %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<%= pb_rails("list/item") do %> List Item <% end %>
<% end %>

Loading Inline

Light

Loading
Loading
Loading

Close
<%= pb_rails("loading_inline") %>

<%= pb_rails("loading_inline", props: {
	align: "center"
}) %>

<%= pb_rails("loading_inline", props: {
	align: "right"
}) %>
Dark

Loading
Loading
Loading

Close
<%= pb_rails("loading_inline", props: {
	dark: true
}) %>

<%= pb_rails("loading_inline", props: {
	align: "center",
	dark: true
}) %>

<%= pb_rails("loading_inline", props: {
	align: "right",
	dark: true
}) %>

Message

Default

Message
How can we assist you today?
20 seconds ago


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


To processs your order, I'll need your full name.
4 hours ago


Application
Application for Kate Smith is waiting for your approval


Complaint
We're so sorry you had a bad experience!
2 days ago


Support
Please hold for one moment, I'll check with my manager.
2 days ago

Close
<%= pb_rails("message", props: {
  label: "Message",
  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: "Support",
  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"
}) %>

<br><br>

<%= pb_rails("message", props: {
  message: "To processs your order, I'll need your full name.",
  timestamp: "4 hours ago",
  avatar_name: "Lisa Thompson",
  avatar_url: "https://randomuser.me/api/portraits/women/39.jpg"
}) %>

<br><br>

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

<br><br>

<%= pb_rails("message", props: {
  label: "Complaint",
  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: "Support",
  message: "Please hold for one moment, I'll check with my manager.",
  timestamp: "2 days ago"
}) %>

Online Status

Default




Close
<%= pb_rails("online_status", props: { status: "offline" }) %>

<br>

<%= pb_rails("online_status", props: { status: "online" }) %>

<br>

<%= pb_rails("online_status", props: { status: "away" }) %>

Person

Default

Kyle

Fadigan


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

Person Contact

Default

Pauline

Smith

email@example.com
(555) 555-5555
(324) 562-7482

Close
<%= 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

Close
<%= 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

Close
<%= 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"
    }
  ]
}) %>

Pill

Default

default



success



error



warning



info



neutral


Close
<%= pb_rails("pill", props: {
  text: "Default"
}) %>

<br><br>

<%= pb_rails("pill", props: {
  text: "success",
  variant: "success"
}) %>

<br><br>

<%= pb_rails("pill", props: {
  text: "error",
  variant: "error"
}) %>

<br><br>

<%= pb_rails("pill", props: {
  text: "warning",
  variant: "warning"
}) %>

<br><br>

<%= pb_rails("pill", props: {
  text: "info",
  variant: "info"
}) %>

<br><br>

<%= pb_rails("pill", props: {
  text: "neutral",
  variant: "neutral"
}) %>

Progress Simple

Default


Close
<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>
Setting Values



Close
<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

<br>

<%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %>
Progress Bar Width


Close
<%= pb_rails("progress_simple", props: { percent: 40, width: "100px" }) %>
Muted


Close
<%= pb_rails("progress_simple", props: { percent: 64.9, muted: true }) %>
Align




Close
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "center" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "right" }) %>

Section Separator

Text Separator

Title Separator

Close
<%= pb_rails("section_separator", props: { text: "Title Separator" }) %>
Line Separator

Close
<%= pb_rails("section_separator") %>

Source

Default

BJ's Johnston-208

Retail


Referral-phrg

Inbound


BJ's Future CB

Anna Black
48582

Close
<%= 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

Close
<%= 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

Close
<%= 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"
  }
}) %>

Star Rating

Default

0

3

1.5

5

Close
<%= pb_rails("star_rating") %>

<br>

<%= pb_rails("star_rating", props: { rating: 3 }) %>

<br>

<%= pb_rails("star_rating", props: { rating: 1.5 }) %>

<br>

<%= pb_rails("star_rating", props: { rating: 5 }) %>
Hide Rating Value

3.5

Close
<%= pb_rails("star_rating", props: { rating: 3.5, hide_rating: true }) %>

Stat Change

Default

28.4%

6.1%

98%

Close
<%= 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: 98
}) %>

Stat Value

Default

1048

 


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

5294

 

appt


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

Table

Small

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "sm", container: false }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Medium

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "md", container: false }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Large

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "lg", container: false }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Table Container

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "md" }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Disable Hover

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "md", container: false, disable_hover: true }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Multi-line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "md", container: false }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Force Single Line

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5
Value 1
Value 1
Value 1		 Value 2 Value 3
Value 3		 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "md", single_line: true, container: false }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1<br/>Value 1<br/>Value 1</td>
      <td>Value 2</td>
      <td>Value 3<br/>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Table Dark

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "md", container: false, dark: true }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>
Table Container Dark

Column 1 Column 2 Column 3 Column 4 Column 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5
Value 1 Value 2 Value 3 Value 4 Value 5

Close
<%= pb_rails("table", props: { size: "md", dark: true }) do %>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
      <td>Value 5</td>
    </tr>
  </tbody>
<% end %>

Text Input

Default

First Name
Last Name
Phone Number
Email Address
Zip Code

Close
<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold" }) %>
<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name" }) %>
<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number" }) %>
<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address" }) %>
<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code" }) %>

Time

Sizes

10:54a EST



Close
<%= pb_rails("time", props: {
  time: Time.now,
  size: "lg"
}) %>

<br>

<%= pb_rails("time", props: {
  time: DateTime.now,
  size: "sm"
}) %>

<br>

<%= pb_rails("time", props: {
  time: "2012-08-02T15:49:29Z",
  size: "xs"
}) %>
Timestamp Values




Close
<%= pb_rails("time", props: {
  time: "2012-08-02T15:49:29Z"
}) %>

<br>

<%= pb_rails("time", props: {
  time: DateTime.now
}) %>

<br>

<%= pb_rails("time", props: {
  time: DateTime.now,
  timezone: "America/Chicago"
}) %>

Timestamp

Default

20 seconds ago

Close
<%= pb_rails("timestamp", props: { text: "20 seconds ago" }) %>

Title

Light UI

Default Title


Title 4

Title 3

Title 2

Title 1


Close
<%= pb_rails("title", props: { text: "Default Title" }) %>

<br/>

<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
Dark UI

Default Title


Title 4

Title 3

Title 2

Title 1


Close
<%= pb_rails("title", props: { text: "Default Title", dark: true }) %>

<br/>

<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4, dark: true }) %>
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, dark: true }) %>
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, dark: true }) %>
<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, dark: true }) %>

Title Count

Default

Appointments

35.78

Appointments

7,399

Appointments

-379,503.372

Close
<%= 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

Close
<%= 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

Close
<%= 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"
}) %>

Toggle

Sizes



Close
<%= pb_rails("toggle", props: {
  size: "sm",
  checked: false
}) %>

<br>

<%= pb_rails("toggle", props: {
  size: "md",
  checked: false
}) %>
Default State



Close
<%= pb_rails("toggle", props: {
  size: "md",
  checked: true
}) %>

<br>

<%= pb_rails("toggle", props: {
  size: "md",
  checked: false
}) %>
Name and Value

Which of the following vehicles do you own?


Car

Bike

Close
<%= pb_rails("title", props: { size: 4, text: "Which of the following vehicles do you own?" }) %>

<br>

<%= pb_rails("caption", props: { text: "Car" }) %>
<%= pb_rails("toggle", props: {
  size: "sm",
  checked: false,
  name: "vehicle",
  value: "car"
}) %>

<br>

<%= pb_rails("caption", props: { text: "Bike" }) %>
<%= pb_rails("toggle", props: {
  size: "sm",
  checked: false,
  name: "vehicle",
  value: "bike"
}) %>
Custom checkbox input


Close
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input class="my_custom_input" type="checkbox" name="custom_checkbox" value="ABC" />
<% end %>
Custom radio inputs

Select one option:


Male

Female

Other

Close
<%= pb_rails("title", props: { size: 4, text: "Select one option:" }) %>

<br>

<%= pb_rails("caption", props: { text: "Male" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="gender" value="male">
<% end %>

<br/>

<%= pb_rails("caption", props: { text: "Female" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="gender" value="female">
<% end %>

<br/>

<%= pb_rails("caption", props: { text: "Other" }) %>
<%= pb_rails("toggle", props: { size: "sm" }) do %>
  <input type="radio" name="gender" value="other">
<% end %>

User

Default

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black


Anna Black


Close
<div class="pb--doc-demo-row">
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "vertical",
      align: "center",
      size: "lg",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      orientation: "horizontal",
      align: "left",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>

     <br>

     <%= pb_rails("user", props: {
       name: "Anna Black",
       orientation: "horizontal",
       align: "left",
       avatar: true
     }) %>
  </div>
</div>
Text Only

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Close
<div class="pb--doc-demo-row">
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "center",
      size: "lg"}) %>
  </div>
  <div class="">
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left"}) %>
  </div>
</div>
Horizontal Size

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Anna Black

Remodeling Consultant

Close
<div class="pb--doc-demo-row">
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      size: "sm",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      size: "md",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
  <div>
    <%= pb_rails("user", props: {
      name: "Anna Black",
      title: "Remodeling Consultant",
      orientation: "horizontal",
      align: "left",
      size: "lg",
      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
      }) %>
  </div>
</div>
Vertical Size

Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant


Anna Black

Remodeling Consultant

Close
<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  orientation: "vertical",
  align: "center",
  size: "sm",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
  }) %>

<br><br>

<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  orientation: "vertical",
  align: "center",
  size: "md",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
  }) %>

<br><br>

<%= pb_rails("user", props: {
  name: "Anna Black",
  title: "Remodeling Consultant",
  orientation: "vertical",
  align: "center",
  size: "lg",
  avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
  }) %>

User Badge

Default




Close
<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "md"
}) %>

<br><br>

<%= pb_rails("user_badge", props: {
  badge: "million-dollar",
  size: "md"
}) %>
Sizes






Close
<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "sm"
}) %>

<br><br>

<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "md"
}) %>

<br><br>

<%= pb_rails("user_badge", props: {
  badge: "veteran",
  size: "lg"
}) %>

Vertical Nav

Default

Title Example

Close
<%= pb_rails("vertical_nav", props: {title: "Title Example", link: "#"}) do %>
  <%= pb_rails("vertical_nav/item", props: { text: "Active Nav Item using text prop", link: "#", active: true }) %>
  <%= pb_rails("vertical_nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
  <%= pb_rails("vertical_nav/item", props: { text: "Nav Item using text prop", link: "#" }) %>
<% end %>
Block

Title Example

Close
<%= pb_rails("vertical_nav", props: {title: "Title Example", link: "#"}) do %>
  <%= pb_rails("vertical_nav/item", props: { link: "#", active: true }) do%>Active Nav Item using block<% end %>
  <%= pb_rails("vertical_nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
  <%= pb_rails("vertical_nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
<% end %>
Without Title


Close
<%= pb_rails("vertical_nav") do %>
  <%= pb_rails("vertical_nav/item", props: { link: "#", active: true }) do%>Active Nav Item using block<% end %>
  <%= pb_rails("vertical_nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
  <%= pb_rails("vertical_nav/item", props: { link: "#" }) do%>Nav Item using block<% end %>
<% end %>