HTML Business Card Generator

From paper to NFC: the digital business card stack

A business card is still one of the highest-friction marketing touchpoints in B2B — trade shows, networking events and field sales rely on a quick exchange of contact data. Today there are four parallel formats: printed cards (the classic, still dominant in Japan and at trade shows), vCard files (.vcf — RFC 6350, the universal standard supported by iOS, Android, Outlook, Gmail and every CRM), QR codes that point either to a vCard download or to a landing page, and NFC cards that broadcast a profile when tapped against a phone (iOS 14+ and modern Android handle them natively). An HTML "digital business card" usually ties all of these together: a responsive landing page with a profile photo, role, links to social and a download-vCard button.

A minimal HTML card uses Flexbox for the screen layout and a print stylesheet for the paper version — ABNT standard for a Brazilian business card is 90 × 55 mm, while the international common size is 85 × 55 mm:

<section class="card">
  <img src="photo.jpg" alt="Profile">
  <h1>Jane Doe</h1>
  <p>Product Designer · ACME</p>
  <a href="contact.vcf">Save contact</a>
</section>
<style>
  @media print { @page { size: 90mm 55mm; margin: 0; } }
</style>

vCard, QR code and Wallet passes

A vCard is a plain-text file that any contact app can import. The minimum structure is BEGIN:VCARD\nVERSION:3.0\nFN:Jane Doe\nTEL:+1...\nEMAIL:...\nEND:VCARD. Pair it with a QR code that encodes either the vCard text directly (works offline) or a short URL pointing to a hosted vCard (smaller QR, easier to update). Apple Wallet and Google Wallet support contact passes via pass.json bundles signed with an Apple-issued certificate — services like HiHello and Blinq handle the signing for you and generate an "Add to Wallet" button.

Semantic HTML and microdata for SEO

A digital card double-functions as a personal landing page, so wrap the contact data in schema.org/Person microdata: itemscope itemtype="https://schema.org/Person" on the wrapper, then itemprop="name", "jobTitle", "telephone", "email", "worksFor" on the children. Google uses this to enrich knowledge-panel previews. The older hCard microformat (class="vcard", class="fn") is still valid but largely superseded.

NFC cards, biolink pages and sustainability

NFC business cards from Linq, Popl, V1CE, HiHello and Blinq embed a chip that opens your profile URL when tapped — no app required on iOS 14+ or modern Android. They also collect analytics: every tap is timestamped, so you know which trade-show day yielded most leads. Biolink builders like Linktree, beacons.ai, bento.me and about.me work as no-code alternatives. Sustainability is a real selling point — a digital card avoids the paper waste and shipping footprint of restocking 1 000 cards every quarter.

FAQ

Do NFC cards work on iPhone? Yes, starting iOS 14 (2020) the iPhone reads NFC tags automatically in the background — no app needed. Older iPhones (XS and below) require the user to open the NFC reader from Control Center.

Is the vCard format truly universal? Yes — .vcf is supported by iOS Contacts, Android Contacts, Outlook, Gmail, Apple Mail, every major CRM (Salesforce, HubSpot, Pipedrive) and is exportable from all of them. RFC 6350 standardised it in 2011.

Should I generate a QR code alongside the card? Highly recommended. A QR works whether the recipient has an NFC reader handy or not, is printable on the back of a paper card, and scales from a 1 cm sticker on a laptop to a poster behind a trade-show booth.

Print or digital — which wins? They are complementary. Paper still dominates Japanese meishi exchange etiquette (offered with two hands, bow) and trade shows; digital wins for sales reps, remote workers and anyone who wants click analytics. Most professionals carry both.