The Obsidian Contact Cards Plugin transforms YAML data inside a special code block into a beautifully designed contact card. This lets you quickly view a person's details (even in preview mode).
NOTE: This plugin utilizes third-party services:
- Avatars are pulled from Gravatar, based on email address.
- Company logos retrieved from Brandfetch, based on email domain.
- Beautiful Formatting: Display name, title, company, email, and phone number in a clean, business-card style layout.
- Simple Syntax: Just provide a
contact-card
code block with YAML fields, and the plugin will handle the rest. - Customizable: Adjust styling by modifying the plugin’s CSS or by creating your own Obsidian CSS snippets.
- Powerful Integrations:
- Photos automatically populated based on email address
- Company logos pulled based on email domain (when Company name is provided)
- Clickable fields for more context (phone, email, location, etc)
- Profile Card UI by Genaro Colusso
- Profile photos from Gravatar
- Company logos from Brandfetch
- Vector graphics from SVG Repo
- Fork the repo & clone to a local development folder. For convenience, you can place this folder in your
.obsidian/plugins/obsidian-contact-cards
folder or symlink it! - Install dependencies using
npm install
- Run
npm run dev
to compile your plugin frommain.ts
tomain.js
. - Reload Obsidian to load the new version of your plugin.
- Enable plugin in settings window.
Add a code block to your note:
```contact-card
name: Bryan Stone
email: [email protected]
company: Steampunk Labs
title: Founder & Managing Partner
phone: 2565551234
location: Madison, AL
```
View the rendered card in Reading/Preview mode:
The obsidian-contact-cards
plugin allows for several customizable settings to tailor the behavior and design of your contact cards. Below are the available options you can configure:
-
Brandfetch Client ID
- Description: Company logos are retrieved using the email domain via the Brandfetch API. To use this API, you must register for a Client ID. This service is available free of charge.
- Note: Register for your free Brandfetch API key here.
-
Default Country Code
- Description: This setting determines the country code used for phone number formatting. Provide the 2-letter country code (e.g., "GB" for the United Kingdom, "IN" for India)
- Default: "US"
The obsidian-contact-cards
plugin provides several customizable CSS classes to help you personalize the appearance of the business cards. You can override these styles in your own stylesheet to create a custom look and feel. Below are the available classes and their purposes:
.contact-card-content
- The outer container for the card, this is used for layout & sizing..contact-card
- The inner container that holds the profile image, logo, and contact information..contact-card-photo
- Profile photo image of the contact..contact-card-logo
- Company logo displayed on the card..contact-card-info
- Container for the contact's name, title, company, and other information..contact-card-name
- The name of the contact..contact-card-title
- The title/position of the contact..contact-card-separator
- A separator between sections in the contact info (e.g., between name and company)..contact-card-error
- Applied to elements displaying an error message.
.contact-card-content
- This class uses theanimatop
animation to slide the background shape into view..contact-card:after
- This class defines the background shape displayed behind the card.
- Add support for additional "power" fields with custom functionality (e.g. social media links, skills)
- Add richer integration for finding a contact's photo
Contributions, issues, and feature requests are welcome!
Feel free to open an issue or submit a pull request if you find any bugs or have suggestions for improvements.