Icons add a visual layer to written information. They should be used to inform and enhance components. The purpose of the icon will determine whether or not it needs to receive focus or not.
We also use the 8-pt methodology to control the vertical rhythm of our typography. Our base type size is 16px with a 1.5 line-height for optimal reading.
This component is in Beta. Gallery Cards are used to hold specific types of content. They have been used to preview content on the dashboard such as highlight reels and insights.
The split view component is made up of two content areas. The description area on the left and with the data/information area on the right. This pattern helps customers focus on data-heavy information.
Tabs are used as a form of navigation within the same context, allowing the user to alternate between views that provide different information. A count badge can also be used in a tab.
When considering the use of a banner, it's best to evaluate the level of the message first. Content within banners must be important or require action taken by the customer.
Modals are overlaying patterns and will intentionally obscure information behind it as such they can be disruptive. Modals require action before the user can continue interacting with the rest of UserTesting.
Popovers are components that overlay on top of the interface. Popovers can contain a mix of information. Popovers are used to inform customers about specific content and actions.
We also use the 8-pt methodology to control the vertical rhythm of our typography. Our base type size is 16px with a 1.5 line-height for optimal reading.