Profile Card Golf
A super clean avatar card that reveals name, title, and social icons on hover, with a modal for displaying additional bio information.
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.
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:
- Open the content wrapper
- Change the label of the Button element to “Link”
- Change the HTML tag of the Button element to “a [Link].”
- Enter the URL for the link.
- 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.
Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.