The Details component displays data attributes that all relate to some event or case. This component is designed to offer users a quick view into important data attributes, while also offering regions to display more fine-grain details.

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

The Details component is composed of two distinct data display areas: highlightedFields and other regions. At the top of the component are the highlightedFields, if any. These fields are rendered using stacked FieldValueLists that are inline with one another. The value of each field has enlarged text to focus user's attention towards this region.

The regions prop accepts an array of 1, 2, or 3 React Nodes. Each React Node passed to the regions prop will render within its own column below the highlightedFields.

classNamestringAdditional CSS classes.
highlightedFieldsThe set of field values to render in the Highlighted Data list.
List of React components below the highlighted data and line seperation.