Glimpse

The Glimpse component displays meta information about a user or entity. This component is often used within a Popover to provide a user with a quick summary of additional information related to some element on the screen.

For more information on how to use the features and props for this component, check out the developer documentation.

The Glimpse component is composed of two distinct areas: primary data and secondary data. The primary data is featured at the top of the Card and must include primary text at a minimum. The secondary data, if any, renders below the primary data. This component also requires a unique id.

Primary data

The top portion of the Glimpse component is composed by a SummaryItem with primary text, a secondary list of data used to render a MetaList, and a visual region that can be used to display an Avatar or Icon.

Secondary data

The bottom portion of the Glimpse component is reserved for secondary data, if any. This region renders a FieldValueList that is constructed using the fields provided.

NameTypeDefaultDescription
id*stringThe unique id for the operator.
primary*The primary piece of item information as a string.
classNamestringAdditional CSS classes.
fieldsThe set of field values to render in the list.
refRef<HTMLDivElement>Ref for the wrapping element.
secondarySecondary info about an item. Useful for additional metadata or context.
visualA visual to assist identifying an item. e.g. Avatar or Icon.