Skip to content

Exposure Card ​

The ExposureCard displays a single exposure entry with a type label, value, an action link, and an avatar group showing associated users.

Props ​

PropTypeDefaultDescription
showIndicatorBooleantrueShows or hides the animated status indicator in the header
typeString'Email Address'Category label shown in the header (e.g. "Email Address", "Phone Number")
valueString'jane.b@privacybee.com'The main exposure value to display
linkTextString'This is me'Text for the clickable link in the footer
avatarsArray[{}, {}, {}]Array of avatar objects — pass { image: '...' } for photo avatars or {} for placeholder circles
extraCountNumber0The "+N" overflow count displayed after the avatar list

Events ​

EventDescription
link-clickEmitted when the footer link is clicked

Basic Usage ​

html
<ExposureCard
  type="Email Address"
  value="jane.b@privacybee.com"
  linkText="This is me"
  :avatars="[{}, {}, {}]"
  :extraCount="5"
/>
Email Address

jane.b@privacybee.com

With Photo Avatars ​

html
<ExposureCard
  type="Phone Number"
  value="+1 (555) 867-5309"
  linkText="Not me"
  :avatars="[
    { image: 'https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png' },
    { image: 'https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png' },
  ]"
  :extraCount="3"
/>
Phone Number

+1 (555) 867-5309