Hey @JohnDoe , have you seen the latest updates?
``` ## Mention with an avatar Put a `mention-avatar` first inside the chip to show who it refers to. The picture is set as a background image. ```html @JaneSmith @EganPoetz ``` ## Mention with an app `mention-app` shows a square logo instead of a round picture, for a service or a brand. ```html Netflix GitHub ``` ## Mention with a color `mention-color` is a swatch you tint with any `bg-*` utility, so a color value can be named and shown at once. ```html #066fd1 rgb(47, 179, 68) hsl(24deg, 94%, 50%) ``` ## Mention with a count Add `mention-count` at the end for a muted number, for example how many posts carry a tag. ```html #WebDevelopment16 #Tabler4 ``` ## Accessibility - The `@` or `#` sign is part of the meaning, not decoration. When the design drops it, keep it in a `visually-hidden` span so the chip still reads as a mention. - The avatar, the logo and the swatch are background images, so they carry no text. The name inside the chip has to say who or what it is. - A chip that links somewhere must be an `a` with an `href`. A `span` with a click handler cannot be reached by keyboard. - `mention-color` shows a color as a swatch, so never let the swatch be the only clue - keep the value or the color name in the text, as the examples do.