Icon Value

Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value.

See this kit in action in our sample UI

Default

15m

Code Example

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

15m

Code Example

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

UI Samples using Icon Value Kit

Get the full picture. See how this kit is used in our samples.

News Magazine

Trending Repositories

Crowdsourced Posts

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
number_spacing
shadow
line_height
display
cursor
flex_direction
flex_wrap
justify_content
justify_self
align_items
align_content
align_self
flex
flex_grow
flex_shrink
order
id
data
aria
children
text
icon
align