Mention

A mention is an inline chip inside running text. Use it to point at a person, a tag, an app or a color without breaking the flow of the sentence.

Default markup

Use the mention class for a chip inside a sentence. It works on a span, or on an a when the chip should link somewhere.

<p>Hey
  <a href="#" class="mention">
    <span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span>
    <span class="visually-hidden">@</span>JohnDoe
  </a>, have you seen the latest updates?
</p>

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.

<a href="#" class="mention">
  <span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span>
  <span class="visually-hidden">@</span>JaneSmith
</a>
<a href="#" class="mention">
  <span class="mention-avatar" style="background-image: url(/static/avatars/029m.jpg)"></span>
  <span class="visually-hidden">@</span>EganPoetz
</a>

Mention with an app

mention-app shows a square logo instead of a round picture, for a service or a brand.

<a href="#" class="mention">
  <span class="mention-app" style="background-image: url(/static/brands/netflix.svg)"></span>Netflix
</a>
<a href="#" class="mention">
  <span class="mention-app" style="background-image: url(/static/brands/github.svg)"></span>GitHub
</a>

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.

<span class="mention">
  <span class="mention-color bg-blue"></span>#066fd1
</span>
<span class="mention">
  <span class="mention-color bg-green"></span>rgb(47, 179, 68)
</span>
<span class="mention">
  <span class="mention-color bg-orange"></span>hsl(24deg, 94%, 50%)
</span>

Mention with a count

Add mention-count at the end for a muted number, for example how many posts carry a tag.

<a href="#" class="mention">#WebDevelopment<span class="mention-count">16</span>
</a>
<a href="#" class="mention">#Tabler<span class="mention-count">4</span>
</a>

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.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

Related