The Contact kit automatically formats US phone numbers when the contactType / contact_type is one of: home (default), work, cell, work-cell, wrong-phone.
email to display emails.international to display International phone numbers exactly as provided (no formatting applied).extension to display four digit phone extensions.Use the Contact kit with icon_enabled: false and unstyled: true to display phone numbers with full typography control. When unstyled: true, the Contact kit renders just the formatted text without a Body wrapper, allowing you to wrap it in your own Typography kit to control the color and styling.
NOTE: The value passed into the amount prop can be either a string or numeric value.
Remove the "$" symbol by setting an empty string: symbol: "".
Abbreviate larger amounts into thousands (K), millions (M), billions (B), and even trillions (T).
Use decimals: "matching" when you want the full decimal amount displayed as a single number rather than split visually.
For alternative typography styles, you can pass a boolean prop called unstyled to the Currency kit and wrap it in any of our typography kits (Title, Body, Caption, etc.). This will allow the Currency kit to inherit any of our typography styles.
The optional commaSeparator can be used to auto-format the use of commas as a thousands separator.
NOTE: If the value passed into the amount prop is already comma-dilineated, it will not add additional commas.
Small Currency kits have the negative sign on the lefthand side of the "$" symbol.
To customize how the amount field appears when it is empty, use the null_display prop and set it to the desired value you want to display.
Use this kit on tables, card displays, or on modals. It's versatile for displaying in the most condensed areas.
Emphasis on street happens by default. (no prop needed)
Emphasis on "city" makes the city emphasized, rather than the street.
Adding "none" to emphasis prop will provide no emphasis.
Use the target prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any web/standard values or a custom string to specify your link target.
The state prop will always capitalize the state name, even if the data entered is in lowercase. For example, when state="pa" is passed, it will be rendered as "PA". When you pass preserve_case: true, the street address will be rendered exactly as entered, without automatic title capitalization.
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.
Use this kit to display a label and value text for almost every data entry.
Variant details can pass icon, description, title, date, and active props.
Use this kit to display users, homeowners, or person of contact.
Increase colors your icon GREEN & Decrease colors your icon RED.
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.
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.
Use this kit as a form of label value only for a numeric value.
Use this kit in tables and cards to display data that doesn’t have a caption assigned.
