5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven profile cards: a centred team member card, a social profile with a cover banner and counts, a compact contact row with status, a frosted glass card, a freelancer card with skills and rate, a card that flips to contact details and an author byline for articles.
A team member card with an initials avatar, name, role, a short bio and two links. The links have visible text rather than icon-only buttons, and the card is an article with the person's name as its heading.
A social-style profile: a gradient cover banner, an avatar overlapping its bottom edge, and post and follower counts. The counts are a description list, so each number is paired with its label for assistive technology.
var b = document.querySelector('.pf2 button');
b.onclick = function () { var on = b.getAttribute('aria-pressed') !== 'true'; b.setAttribute('aria-pressed', on); b.textContent = on ? 'Following' : 'Follow'; };
03. Horizontal Contact Card
ProfileContact
A compact contact row for a sidebar or team list: avatar, name, role and status. The green online dot is decorative and the status is also written in a visually hidden span, so colour is not the only way to tell.
A frosted glass profile card over colourful shapes, using backdrop-filter blur and a translucent dark tint. Text stays white on the darkened glass so contrast holds even where the background behind it is bright.
A freelancer card with an availability badge, a day rate and skill tags in a list. The rate uses a data element with a machine-readable value, and Book a call is a link because it goes to a booking page.
The front shows the person and the back shows contact details, flipped by a button with aria-pressed rather than by hover, so it works on touch and with the keyboard. Both faces stay in the DOM and the hidden face is made inert.
var w = document.querySelector('.pf6'), b = w.querySelector('button'), f = w.querySelector('.f'), bk = w.querySelector('.bk');
b.onclick = function () { var on = w.classList.toggle('flip'); b.setAttribute('aria-pressed', on); b.textContent = on ? 'Show profile' : 'Show contact'; f.inert = on; bk.inert = !on; };
07. Author Byline Card
ProfileBlog
An author box for the end of an article: small avatar, the name as a link to the author page, a one-line bio and the update date in a time element. It is the kind of byline that helps readers, and search engines, see who wrote the piece.
View code
<aside class="pf7" aria-label="About the author"><span class="av" aria-hidden="true">AK</span><div><p class="n">Written by <a href="#author-amara">Amara Kone</a></p><p class="b">Writes about frontend performance and design systems.</p><p class="d">Updated <time datetime="2026-10-02">2 October 2026</time></p></div></aside>
A profile card is about one person, so make their name the card's heading. People using screen readers can then list and jump between the people on a team page.
Avatars without photos
Initials in a coloured circle work at any size and need no image. Mark them aria-hidden="true" because the name is already in the heading; with a real photo, use an empty alt for the same reason.
Counts as a description list
Followers, posts and similar stats are label and value pairs, which is what <dl> is for. Visually you can still show the number above the label with flex-direction: column-reverse.
Status is more than a dot
A green dot for online means nothing to someone who cannot see colour. Add the status in text, even if it is visually hidden.
Frequently asked questions
Are the people in these demos real?
No. Names and details are placeholders; replace them with your own team.
Should the whole card be a link?
Only if it has a single destination. Cards with several links, such as portfolio and email, should keep separate links.
Does an author byline help SEO?
It helps readers judge who wrote something, which search engines also look for. Link it to an author page with more detail.