Digital business card layout
A phone-friendly contact card with a cover band, overlapping avatar, call, text and web shortcuts and a save-contact button.
Tailwind CSSCardsbusiness-cardprofilecontactmobile
Live preview
Code
<article class="mx-auto w-full max-w-sm overflow-hidden rounded-3xl bg-white shadow-xl ring-1 ring-slate-200">
<!-- Cover band with avatar overlapping its bottom edge -->
<div class="h-28 bg-gradient-to-r from-teal-500 to-cyan-500"></div>
<div class="-mt-12 px-6 pb-6 text-center">
<div class="mx-auto grid size-24 place-items-center rounded-full bg-slate-900 text-3xl font-bold text-white ring-4 ring-white">MR</div>
<h1 class="mt-3 text-xl font-bold text-slate-900">Maya Rivera</h1>
<p class="text-sm text-slate-500">Head of Partnerships · Acme Inc.</p>
<!-- Quick actions: tel, mail and web links need no JavaScript -->
<div class="mt-5 grid grid-cols-3 gap-2 text-xs font-medium">
<a href="tel:+15550100" class="rounded-xl bg-slate-100 py-3 text-slate-700 hover:bg-teal-50">
<span class="block text-lg" aria-hidden="true">☎</span>Call</a>
<a href="sms:+15550100" class="rounded-xl bg-slate-100 py-3 text-slate-700 hover:bg-teal-50">
<span class="block text-lg" aria-hidden="true">✉</span>Text</a>
<a href="https://example.com/maya" class="rounded-xl bg-slate-100 py-3 text-slate-700 hover:bg-teal-50">
<span class="block text-lg" aria-hidden="true">🌐</span>Web</a>
</div>
<dl class="mt-5 space-y-2 text-left text-sm">
<div class="flex justify-between gap-4 border-t border-slate-100 pt-2"><dt class="text-slate-500">Phone</dt><dd class="text-slate-900">+1 555 0100</dd></div>
<div class="flex justify-between gap-4 border-t border-slate-100 pt-2"><dt class="text-slate-500">Office</dt><dd class="text-right text-slate-900">1 Example Street, Northwind</dd></div>
</dl>
<!-- Save to contacts: downloads a vCard generated server side -->
<a href="/card/maya.vcf" download
class="mt-6 block rounded-full bg-teal-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-teal-500">
Save contact
</a>
</div>
</article>
How it works
What it solves
A digital business card is opened from a QR code or an NFC tap, so the first screen must offer the three things people actually do: call, message and save the contact. This layout puts those actions above the fold on a phone.
How it works
The card is a rounded article with a gradient cover band. The avatar uses a negative top margin on its wrapper (-mt-12) so it overlaps the band, and a white ring separates it from the gradient. Quick actions are a three-column grid of plain links with tel:, sms: and https: schemes, which the phone handles natively with no script. Details sit in a description list, the correct element for label and value pairs, with each row split by a hairline.
The final button points to a vCard file generated by your server and carries the download attribute; mobile browsers then offer to add it straight into the address book.
Adapting it
- Replace the initials with an image and keep the same size and ring classes.
- Swap the teal gradient and button for a colour from the owner's theme.
- Add more rows to the list for email, social profiles or booking links.
Pitfalls
- Phone numbers in
tel:links must use the international format without spaces. - Only show details the owner chose to publish.
- Generate the vCard with correct line endings, or some contact apps reject it.
How to use it
- Add the markup as the public view of a card and fill it from the card record.
- Build the
tel:andsms:links from a stored international number. - Create a route that returns a vCard file with the content type for contacts.
- Make sure the page includes the viewport meta tag so it renders at phone width.
Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.