12.9.1

Person Contact

This kit can be used to display a person contact information. It includes multiples kits like: Person, contact and caption kit. Use this kit for both Nitro users and Homeowners.

Default

Pauline

Smith

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

Multiple People

Harvey

Walters

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

Walters

(555) 555-5555

With Detail

Harvey

Walters

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

With Wrong Numbers

Pauline

Smith

email@example.com
(555) 555-5555
(304) 861-5385
wrong number
(324) 562-7482


Thing To Avoid

• Don’t unstack the contacts: email & phone.
• Keep the fonts exact in size and weight, don’t change the color variations.

UI Samples using Person Contact Kit

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

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
  • contacts
  • first_name
  • last_name