Back to components
ComponentsContact details card
Displays a user’s contact information in a structured card layout, typically used in profiles, directories, or support views.
Component
John Doe
john.doe@example.com
123-456-7890
Props
| Props | Default | Type |
|---|---|---|
name | John Doe | string |
email | — | string |
phone | — | string |
Usage
name
Sets the contact name.
<template>
<ContactDetailsCard
name="Silvia Pelkert"
/>
</template>
Sets the contact email. If the email is not provided, the email will be hidden.
<template>
<ContactDetailsCard
email="silvia.pelkert@example.com"
/>
</template>
phone
Sets the contact phone. If the phone is not provided, the phone will be hidden.
<template>
<ContactDetailsCard
phone="123-456-7890"
/>
</template>