Documento
Propuesta de rediseño
El nuevo inicio debe cargar en menos de dos segundos. Así el contenido principal aparece antes.
El resto de enlaces irán subrayados.
- SSarahace 5 min
¿Y si dejamos el carrusel solo en móvil?
- LLeohace 2 min
Lo probamos en la próxima versión.
- TTúahora
- LLeohace 1 h
Revisemos el contraste del color nuevo.
- TTúahora
Comentario resuelto
Comment thread anchored in the margin
Click a highlighted sentence and its comment thread appears in the margin joined by a line, with replies and a resolve button.
Settings
Code
<div class="uvq13-cmt"><div class="doc"><p class="kk">Document</p><p class="h" tabindex="-1">Redesign proposal</p><p class="tx"><span>The new home page must load in under two seconds.</span> <button type="button" class="hl" aria-expanded="false" aria-controls="uvq13-cmt-0">We propose removing the carousel and keeping a single still image.</button> <span>That way the main content shows up sooner.</span></p><p class="tx"><button type="button" class="hl" aria-expanded="false" aria-controls="uvq13-cmt-1">Buttons will have a single action color.</button> <span>All other links will be underlined.</span></p></div><span class="bg" aria-hidden="true">2</span><span class="bg" aria-hidden="true">1</span><svg class="ln" aria-hidden="true"><path/></svg><section class="cm" id="uvq13-cmt-0" role="dialog" aria-label="Comments"><ul><li><span class="av" style="--c:#db2777">S</span><div><b>Sara</b><small>hace 5 min</small><p>What if we keep the carousel on mobile only?</p></div></li><li><span class="av" style="--c:#0284c7">L</span><div><b>Leo</b><small>2 min ago</small><p>We will try it in the next version.</p></div></li><li class="tpl" hidden><span class="av" style="--c:#64748b">T</span><div><b>You</b><small>now</small><p></p></div></li></ul><div class="rp"><input placeholder="Reply…" aria-label="Reply" autocomplete="off"><button type="button" class="sd" aria-label="Send"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l16-8-6 16-2.5-6.5z"/></svg></button></div><button type="button" class="rs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Resolve</span></button></section><section class="cm" id="uvq13-cmt-1" role="dialog" aria-label="Comments"><ul><li><span class="av" style="--c:#0284c7">L</span><div><b>Leo</b><small>1 h ago</small><p>Let's check the contrast of the new color.</p></div></li><li class="tpl" hidden><span class="av" style="--c:#64748b">T</span><div><b>You</b><small>now</small><p></p></div></li></ul><div class="rp"><input placeholder="Reply…" aria-label="Reply" autocomplete="off"><button type="button" class="sd" aria-label="Send"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l16-8-6 16-2.5-6.5z"/></svg></button></div><button type="button" class="rs"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>Resolve</span></button></section><p class="toast" aria-live="polite"><span>Comment resolved</span></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Shared documents keep discussion next to the text, and this overlay recreates that layout. Highlighted sentences carry a count badge in the margin, and opening one slides its thread alongside, aligned with the line and linked by a dashed curve. You can reply with Enter, and resolving removes the highlight and confirms with a small notice. It fits editors, review tools, contracts and design feedback.
The main color is the highlight and the connector, the second one the badges and actions. Wrap any sentence in a highlight button pointing at its thread, and Escape or a click outside closes the card and returns focus to the text.