Reference components

These components work with individual rich links and query results. Both supply the target's canonical source, navigable href, and visible label.

An inline avatar badge

The name labels the link, so the avatar is decorative. A small avatar and a quiet pill background keep the badge compact within a sentence. Repositories can override --reference-avatar-size or the badge styles locally.

<a class="reference-person" href="{{ href }}">
  <img src="{{ image }}" alt="" width="20" height="20" />
  <span>{{ label }}</span>
</a>

.reference-person {
  --reference-avatar-size: 20px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem .2rem .2rem;
  max-inline-size: 100%;
  vertical-align: middle;
  border: 1px solid var(--pmx-color-border);
  border-radius: 999px;
  background: var(--pmx-color-surface);
  color: var(--pmx-color-fg);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}
.reference-person img {
  inline-size: var(--reference-avatar-size);
  block-size: var(--reference-avatar-size);
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.reference-person:hover { border-color: var(--pmx-color-muted); text-decoration: none; }
.reference-person:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (pointer: coarse) { .reference-person { min-block-size: 44px; } }

A project or Block entry

The title is a link. The requirement outline can contain separate manual controls when the viewer is allowed to use them.

<article class="reference-project">
  <p><a href="{{ href }}">{{ label }}</a></p>
  <x-completion-progress source="{{ source }}" />
  <x-completion-outline source="{{ source }}" label="Requirements" />
</article>

.reference-project { padding: 1rem; border: 1px solid var(--pmx-color-border); border-radius: .75rem; margin-block: 1rem; }
.reference-project > p { margin-top: 0; font-weight: 600; }
.reference-project progress { max-width: 100%; }