9.14.1

Typography Patterns




Contact

Default


Detail Indicator


Currency

Variants


Size


Alignment


No Symbol


Dashboard Value

Full Example


Align


Home Address Street

Default


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

Emphasis


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

Modified


Label Pill

Default


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.

Label Value

Default


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

Details


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

Other Examples


Message

Default


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.

Person

Default


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

Person Contact

Default


Multiple People


With Detail


With Wrong Numbers


Source

Default


Hide Icon


Source Types


Stat Change

Default


Icon


Colors


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

Stat Value

Default


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.

Unit Value


Title Count

Default


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

Align


Title Detail

Default


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