Profile Card Golf

overview

A super clean avatar card that reveals name, title, and social icons on hover, with a modal for displaying additional bio information.

Profile Golf
Available for:
Figma
Bricks
Gutenberg
Buy Frames
Back to library

Overview

Profile Card Golf shows a clean avatar when not being hovered/focused and reveals the person’s name, title, and social icons in the hover/focus state.

The information enters with a subtle animation when hovered while the photo zooms slightly.

It should be noted that the social icons on the card itself are not clickable or focusable. They’re dummy icons designed to show which social profiles the user is active on. Links to these social profiles are contained and accessed via the attached modal, which also contains the individuals’ bio.

The card is structured like this for better accessibility and user experience. Keyboard users don’t have to navigate through every person’s social profile links unless they first select that person and fire the modal.

To use this frame most efficiently, create a custom post type for the people you want to query and add a custom field for each data point in the card and modal. Then, use a query loop to query each person.

Query Loop Compatible

Variables

This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.
--overlay-color
--transition-duration
--transition-function
--transition-delay
--social-icon-size
--social-icon-color
--social-icon-gap

Accessibility Notes

This frame is designed for use with a modal, so it contains a button element instead of a link. If you’d like to use this card to link to another page, follow these steps:

  1. Open the content wrapper
  2. Change the label of the Button element to “Link”
  3. Change the HTML tag of the Button element to “a [Link].”
  4. Enter the URL for the link.
  5. Remove the modal

Additionally, users should not add links to the social profile icons on the card itself. Links to social profiles should only be contained in the modal. This is to enhance the experience of keyboard users.

This frame uses the clickable parent technique.

This frame uses hidden accessibility text.

Related Frames

Related Components

FAQs

    Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.