Profile Cards – 8 Free CSS, Bootstrap & Tailwind Sets
Profile Cards is a pack of eight sets of user profile cards and team member cards, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using .card, .btn, .badge, the grid and, where they fit, its dropdown, tab and button plugins, and Tailwind CSS 4. The sets cover classic cards with a cover and stats, team grids with social links, creator profiles with a Follow toggle and tabs, business cards with copy buttons and a vCard download, flip cards, account menus and hover cards, a dark set and a modern CSS set built on container queries, :has() and @property. No set uses photos of people: the avatars are initials, abstract gradients or illustrations drawn for the pack, and every name is fictional.
A good profile card says who someone is in a glance and lets you act on it without guessing. The name is a real heading, the numbers are labelled so that 4.2k is read as 4.2k followers, and the avatar is decoration rather than the only place the name appears. On a page with twenty cards, every Follow or Message control needs the person's name in its accessible name, otherwise a screen reader user hears twenty identical buttons. A Follow toggle should announce its state, a flip card should turn on a button rather than on hover alone, and a hover card has to open on keyboard focus too and close with Escape. Contact details work best as real mailto: and tel: links with a way to copy them.
