Navigation

 v0.0.4
Typography

Mention

A person, a team or a thing named inside a sentence.

On this page

A mention names a person, a team or a thing inside a sentence: @Ada, #design, an issue's number. It keeps the sentence's own type and ink, at the control weight, on a faint tint of that ink. It has no contour, which tells it apart from inline code.

Mention

<div class="flex flex-col max-w(440) mx-auto">  <div class="message">    <div class="message-bubble">      <a class="mention" href="#">@Ada Lovelace</a>the build for      <a class="mention" href="#">#412</a>is green. Can      <a class="mention mention-self" href="#">@you</a>review it before      <span class="mention">Friday</span>?</div>  </div>  <div class="message message-sent">    <div class="message-bubble">On it. I will loop in      <a class="mention" href="#">@design</a>for the corners.</div>  </div></div>

#Link or text

On an <a> a mention goes somewhere, a profile or an issue, and its tint deepens under the pointer. On a <span> it is only a name set apart, such as a date a parser recognized. The stylesheet tells the two apart by :any-link, so nothing that cannot be followed looks as if it could.

#The reader's own name

mention-self marks the reader: a firmer tint and a hairline, so their own name is found at a glance in a long thread. It stays in ink like every other mention; say "you" or the name in the text, since the difference in tone is slight on purpose.

#In text

A mention does not break across lines. Its tint and its hairline are mixed from the current color, so it reads wherever the sentence does: inside a sent message, which is ink, the name is the bubble's own light text on a light tint.

#Accessibility

  • The sign is part of the text. Write @ or # in the element, so the mention reads the same when copied or spoken.
  • A mention that opens a profile is a link and needs no extra role.

#Classes

ClassDescription
mentionThe name: the sentence's own type and ink at the control weight, on a faint tint of that ink. It does not break across lines, and as a link its tint deepens under the pointer
mention-selfThe reader's own name: a firmer tint and a hairline. With mention

#Source

@master/ui/components/mention.css
/* * Mention: a person, a team or a thing named inside a sentence: @Ada, #design, an issue's number. * It is the sentence's own type and its own ink at the control weight, on a faint tint of that ink, with no * contour, which tells it apart from inline code. Because the tint and the hairline are mixed from the * current color, a mention reads on any surface: a page, a card, the ink of a sent message. * As a link it deepens under the pointer. mention-self marks the reader's own name with a firmer tint and a * hairline, so it is found at a glance in a long thread. */@layer components {  .mention {    --mention-tint: 7%;    padding: .0625em .3125em;    border-radius: calc((var(--radius-chip) - 2px) * var(--corner-scale));    corner-shape: var(--corner-shape);    background: color-mix(in oklab, currentColor var(--mention-tint), transparent);    color: inherit;    font-weight: var(--font-weight-control);    text-decoration: none;    white-space: nowrap;    -webkit-box-decoration-break: clone;    box-decoration-break: clone;    @media (hover: hover) {      &:any-link:hover {        --mention-tint: 13%;      }    }    &:focus-visible {      outline: 2px solid var(--color-focus);      outline-offset: 1px;    }    &.mention-self {      --mention-tint: 12%;      box-shadow: inset 0 0 0 .5px color-mix(in oklab, currentColor 28%, transparent);    }    @media (forced-colors: active) {      outline: 1px solid CanvasText;      outline-offset: -1px;    }  }}