Business · Gutenberg
Contact Card block for WordPress
Business card block with photo, contact details, and social links. Multiple style variants.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Business card block with photo, contact details, and social links. Multiple style variants.
Inspector panels on this block: Identity, Contact Details, Social Links (, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Platform” options: LinkedIn, GitHub, Twitter/X, Instagram, YouTube; “Card style” options: Card (bordered + shadow), Flat (no shadow), Minimal (no border), Badge (accent header); “Orientation” options: Vertical (stacked), Horizontal (side by side); “Appearance — Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Business → search “Contact Card” (block name `blockenberg/contact-card` in block.json). Style it in the sidebar after insert.
How to use Contact Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Contact Card”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Identity. Set “Name”, “Job title”, “Company”, “Show photo”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Name | Text field in the inspector. block.json default: Sarah Johnson. Saved as `name`. |
| Job title | Text field in the inspector. block.json default: Lead Designer. Saved as `jobTitle`. |
| Company | Text field in the inspector. block.json default: Acme Studio. Saved as `company`. |
| Show photo | On/off toggle in the inspector. On by default. Saved as `showPhoto`. |
| Show links | On/off toggle in the inspector. On by default. Saved as `showLinks`. |
| Platform | Select control; the chosen value is saved on the block. Options: LinkedIn; GitHub; Twitter/X; Instagram; YouTube; Dribbble; Behance; Custom. Saved as `links`. |
| URL | Text field in the inspector. Saved as `links`. |
| Link label (for aria) | Text field in the inspector. Saved as `links`. |
| Card style | Select control; the chosen value is saved on the block. Options: Card (bordered + shadow); Flat (no shadow); Minimal (no border); Badge (accent header). block.json default: card. Saved as `style`. |
| Orientation | Select control; the chosen value is saved on the block. Options: Vertical (stacked); Horizontal (side by side). block.json default: vertical. Saved as `cardOrientation`. |
| Appearance — Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `align`. |
| Max width (px) | Numeric range control in the inspector. Range 200–700. block.json default: 380. Saved as `maxWidth`. |
| Avatar size (px) | Numeric range control in the inspector. Range 48–140. block.json default: 88. Saved as `avatarSize`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 16. Saved as `borderRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–60. block.json default: 28. Saved as `cardPadding`. |
| Show shadow | On/off toggle in the inspector. On by default. Saved as `showShadow`. |
| Show divider | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Name (Typo Name) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoName`. |
| Meta / Details | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoMeta`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Card Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `cardBorder`. |
| Accent (header / avatar bg) | Color control in the inspector. block.json default: #6366f1. Saved as `accentBg`. |
| Name Color | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Title Color | Color control in the inspector. block.json default: #6b7280. Saved as `titleColor`. |
| Detail Text | Color control in the inspector. block.json default: #374151. Saved as `companyColor`. |
| Icon Background | Color control in the inspector. block.json default: #f1f5f9. Saved as `iconBg`. |
| Icon Color | Color control in the inspector. block.json default: #374151. Saved as `iconColor`. |
| Link Hover Color | Color control in the inspector. block.json default: #6366f1. Saved as `linkColor`. |
| Divider Color | Color control in the inspector. block.json default: #f1f5f9. Saved as `dividerColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Business card block with photo, contact details, and social links. Multiple style variants — that is the job of Contact Card, not a generic content block.
- Use it when you need the editor control labeled “Name”, which exists on this block’s inspector.
- It matches pages about contact, vcard, profile.
- Inserter grouping: company, service, and operations pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Contact Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Contact Card”. It sits under Business. After insert, open Identity and set “Name”, “Job title”, “Company”, “Show photo”.
What makes Contact Card different from other Blockenberg blocks?
Business card block with photo, contact details, and social links. Multiple style variants. Inspector labels on this block include “Name”, “Job title”, “Company”, “Show photo”.
Is the Contact Card Gutenberg block free?
Yes. Contact Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Contact Card to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Identity, Contact Details, Social Links (, Appearance).
Related business blocks
Author Profile
Extended author bio card with avatar, name, role, bio, stats, and social links.
Bio Card
Rich individual profile card with photo, name, role, bio text, skill tags, social links, availability badge, and CTA button.
Email Signature
Design and preview a rich HTML email signature with avatar, name, title, company, phone, email, website, social links, and an optional branded banner or divider. Outputs email-client-safe table-based HTML.
Team Card
Standalone team member card with photo, name, role, bio, skills, and social links.
Team Members
Show your team members with photos, roles, bios, and social links.
About Section
Ready-made About Us section with split image/video + text layout, optional company stats row, badge label, CTA buttons, and full background/color controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Contact Card from the Gutenberg inserter.