Skip to main content
ObjectCard displaying an object with avatar, title, subtitle, and action buttons

​
Overview

ObjectCard displays domain and resource objects in a consistent format. Pass an Inly.Core.Data.ObjectData object and the component automatically renders the avatar, title, subtitle, and link. You can optionally add action buttons.

​
Basic Usage

Pass your object data to the data prop. The component handles all rendering automatically. 
import ObjectCard from '@/core/components/object-card';

export default function UserProfile({ user }) {
  return <ObjectCard data={user} />;
}

​
Adding Actions

Use the actions prop to display buttons on the right side of the card. 
import ObjectCard from '@/core/components/object-card';
import { Button } from '@/core/components/ui/button';

<ObjectCard
  data={user}
  actions={
    <div className="flex gap-2">
      <Button variant="outline" size="sm">
        {__('Edit')}
      </Button>
      <Button variant="destructive" size="sm">
        {__('Delete')}
      </Button>
    </div>
  }
/>;

​
Reference

​
Props

​
data
Inly.Core.Data.ObjectData
required
Object data containing title, subtitle, avatar, and URL.
​
actions
React.ReactNode
Action buttons displayed on the right side of the card.
​
size
'sm' | 'md'
default:"sm"
Card padding size: sm (compact) or md (standard).
​
className
string
Additional CSS classes to apply to the card.

​
ObjectData Structure

The component uses these key fields from ObjectData:
  • title / subtitle — Primary and secondary display text
  • avatar — Avatar data for visual identification
  • url — Makes the card clickable (internal navigation or external link)
  • type / id — Object identification