ObjectInfoCard

A component that displays a grid of labeled fields with optional icons and custom value rendering.

Installation

import { ObjectInfoCard } from 'uxp/components';

Signature

const ObjectInfoCard: React.MemoExoticComponent<React.FunctionComponent<ObjectInfoCardProps>>

Examples

<ObjectInfoCard
  fields={[
    { label: 'Name', value: 'John Doe' },
    { label: 'Email', value: '[email protected]' }
  ]}
/>

<ObjectInfoCard
  fields={[
    { label: 'Name', value: 'John Doe', icon: 'user' },
    { label: 'Email', value: '[email protected]', icon: 'envelope', renderValue: (value) => <a href={`mailto:${value}`}>{value}</a> },
    { label: 'Status', value: 'Active' }
  ]}
  columns={3}
  className="custom-info-card"
/>

Properties

Name	Type	Mandatory	Default Value	Example Value
fields	ObjectField[]	Yes	-	-
columns	1 | 2 | 3 | 4	No	-	-
layout	'horizontal' | 'vertical'	No	-	-
valueAlign	'start' | 'end'	No	-	-
className	string	No	-	-
loading	boolean	No	-	-

Related Types

• ObjectInfoCardProps

• ObjectField