8.1.0

Typography Patterns




Contact

Default


Detail Indicator


Currency

Variants


Size


Alignment


No Symbol


Dashboard Value

Full Example


Align


Date

Default


Variants


Alignment


Date Range Inline

Default


Date Range Stacked

Default


Date Stacked

Default


Not Current Year


Day & Month Reverse


Sizes


Alignment


Date Time

Default


Alignment


Size


Date Time Stacked

Default


Date Year Stacked

Default


Use this kits on table displays or column headers to display a single date format.

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


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


Time

Default


Use this anywhere needed to display a certain timestamp

Sizes


Timestamp Values


Handling Timezones


Simply enter the timezone you would like to use and it will appear.

The list of supported timezones is exhaustive and we're most likely to only use timezones from the Americas so we've highlighted those in the examples.

However, if you need to support another timezone you should be able to Google a specific list, otherwise you can follow the string pattern and try entering a continent and a city.

Remember, this is just labeling the timezone, please verify the actual time for a specified timezone is rendering properly.

Format: <Continent>/<Large_City_Name>

Continent Options: America | Europe | Asia | Africa | Pacific | India | Atlantic | Australia

Alignment


Time Stacked

Default


Timestamp

Default


Alignments


Timezones


Last Updated by


Time Ago


Time Range Inline

Default


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.

Weekday Stacked

Default


Compact


Variant