Forem Creators and Builders

Cover image for Changelog: Profile preview cards
Suzanne Aitchison for Forem Core Team

Posted on

Changelog: Profile preview cards

I'm pleased to share that we have started rolling out profile preview cards to various parts of Forems 🎉

View user details without visiting their profile page

Hovering over or clicking on an author name will pop up a preview card with key user information, and the option to "Follow"/"Unfollow", without the need to visit that user's profile. The preview card includes a link to the user's full profile if you'd like to view their full profile and posts.

Where to find this feature

Profile preview cards are currently being introduced for users not on small screens (i.e. desktop). This is to minimise friction for mobile users who want to navigate to a user's full profile.

You should already be able to find the profile preview card when reading a post if you hover or click on the author's name:

Screenshot showing a preview card over the author byline at the top of the post. It has my name, some profile data, and a follow button.

Very shortly, the feature will also be available on comment author names (already live on DEV):

Screenshot of a user's profile preview card but appearing below their name on a post comment

In the coming weeks, you'll also see this feature appear for author names on the home feed cards.

Interaction patterns and accessibility

This feature should work for all users, including anyone who navigates by keyboard or uses assistive technology.

Mouse users can choose to hover over the author name to view the preview card, or click the author name to have the preview card stay visible regardless of mouse position until the preview is closed by either: clicking the author name, clicking outside of the preview card, or pressing Escape.

Similarly, users who navigate using the keyboard can pop open the preview card by pressing Enter or Spacebar when the author name is focused. When the preview card is opened, focus is sent to the first link inside the preview card so that navigation can continue seamlessly. Similarly, focus is returned to the author name button when the preview is closed.

When using screen-reading software, the author name will communicate whether the preview card pop-up is currently expanded or collapsed.

If you like you can have a look at how we built this feature:

Discussion (5)

link2twenty profile image
Andrew Bone

Very nice

lee profile image

Wow! Sneaked that one in! How cool 🌈

ellativity profile image
Ella Ang (she/her/elle)

So far, my favourite part of this feature is the ability to follow people - especially when it's enabled in comments 👏👏

Such a neat job! Thanks @s_aitchison !

ngtrian profile image
Tri Ân

Great! :love:

nickytonline profile image
Nick Taylor (he/him)

Love this new feature! Great stuff @s_aitchison .

Woman cheering saying "Yeahh!"