Profile Cards

What is a profile card?

A profile card is a compact block that introduces a person: a photo or avatar, a name, a role or short bio, and usually a few actions such as follow, message or social links. You see them as author boxes under blog posts, as member tiles in community sites, as contact cards in CRMs and as user summaries on dashboards.

Unlike a generic card, a profile card has a fixed structure that users recognise instantly, so the layout matters more than decoration.

When to use profile cards

• Author boxes at the end of articles to build trust and link to more content.
• Team or member directories where many people need to be scanned quickly.
• Account summaries in sidebars or dropdowns showing the signed-in user.
• Contact cards with phone, email and location for sales or support staff.

Best practices

• Keep the hierarchy clear: image, name as a heading, role in muted text, then actions.
• Give every photo a meaningful alt text, or an empty alt="" if the name is already printed next to it.
• Icon-only social links need an aria-label such as "Follow on GitHub" so screen readers announce them.
• Use a real <button> for actions like follow or message, and a link for navigation to a profile page.
• In a grid, keep card heights consistent with flexbox or CSS grid so names and buttons line up.
• Check contrast when text sits on a cover image or gradient header.
• Lazy-load avatars with loading="lazy" in long directories.

Framework versions

Each responsive profile card example on this page comes with a live preview and code tabs, and you can filter by framework. The Bootstrap 6 versions use the new theme-* colour roles, so they follow your theme and dark mode automatically. Bootstrap 5 versions build on the familiar .card component, Tailwind CSS versions use utility classes for spacing and rounded avatars, and pure CSS versions work without any framework. Use the copy button or download the snippet, then swap in your own photos, names and links.