What it looks like
It looks like those team photo rows where the faces touch. The avatars are 56-pixel circles with a white border, partly overlapping. Hover one and the photo grows slightly and moves to the front, while a black tag appears above it with the name in bold and the role below, in white text. The tag starts small, rises with a springy bounce and, as the cursor moves across the photo, tilts and slides toward the same side, like a little sign swinging. Two thin green and blue lines run along its bottom edge. The tag stays black in both themes and disappears when the mouse leaves.
You may be looking for this if you asked for something like
- team photos that show the name when I hover
- round avatars side by side with a little tooltip on top
- show who the founders are in a more playful way
- that effect where the name pops up and wobbles above the photo
- an author list with job titles appearing on hover
- overlapping customer faces with a tooltip that springs up
- make the about us section feel more modern
Also known as
- bouncy name tag
- avatar group
- avatar stack
- hover tooltip
- team avatars
- name tag tooltip
When to use
- A team or founders section on a company page
- Social proof with customer or student faces near the main call to action
- A list of authors, speakers or mentors for a course or event
- A credits strip showing who worked on a project
When to avoid
- Essential information, since the tag depends on the mouse and does not open from the keyboard
- Audiences that browse almost only on phones, where there is no hover
How to ask your AI
Create a row of overlapping avatars for the team section with a playful tooltip: on hover, a tag with name and role springs up and tilts with the cursor. Make it also open on focus and tap, use my brand colors and provide a static version for reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Crachá
Does Crachá work on phones?
Only partly. Crachá responds to mouse events, such as entering, moving over and leaving a photo, so on touch screens the tag may not appear. The avatars stay visible, with the name in each image's alt text. For phones, ask your AI to open the tag on tap or to show the name and role below.
Can Crachá be used with a keyboard and screen reader?
Not out of the box. Crachá does not take focus or open its tag from the keyboard, and name and role only show on hover; a screen reader reads just the name in each photo's alt attribute. Ask your AI to make each avatar focusable and show the tag on focus, with the role exposed too.
How do I change the colors of Crachá?
In Crachá the tag is black with white text and two thin green and blue lines at the bottom, fixed colors that do not change in dark mode. The THM Componentes prompt tells your AI to swap those tones for your project color tokens, so you can have a light tag in the light theme, for example.
