# Reference components

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

---

<!-- componentName: person-badge -->

## 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.

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

```css
.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; } }
```

---

<!-- componentName: project-entry -->

## 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.

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

```css
.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%; }
```