Volver arriba.
Patrón canónico de volver arriba para cis, cds, cochid y todos los sitios.
Verlo por niveles
Primero el componente, después la variación de marca y finalmente su uso dentro de una página.
Ver y copiar el código de este render
<a class="ui-sample ui-back-link" data-back-to-top href="#contenido">↑ Volver arriba</a>Variaciones por marca y sitio
Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.
Compañía de Innovación de Santiago
Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.mdCambia en esta marca
- Navegación y contenido propios del servicio
- Acento reservado para acciones y datos
Permanece canónico
- Mark CIS y namebrand de tres líneas
- IBM Plex Sans, foco, espaciado y anatomía
Círculo de Santiago
Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.mdCambia en esta marca
- Mark circular y namebrand Círculo de Santiago en caja normal
- Contenido societario y navegación propia
Permanece canónico
- Misma estructura, orden de cuenta y footer
- Tipografía, foco y comportamiento canónicos
Comparación histórica recuperable
Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.
- Estado actual
- Volver arriba tiene 18 implementaciones observadas en 8 repositorios: cds/cis/cis-librospa, cds/cis/periodismo2-frontend, cis/cis-www, cochid/cochid-cables, cochid/cochid-datos, cochid/cochid-mapas, cochid/cochid-scribe, cochid/cochid-tpte.
- Cambio propuesto
- Publicar en r19 el contrato de Volver arriba para Patrón canónico de volver arriba para cis, cds, cochid y todos los sitios.
- Qué ocurre si respondes No
- No se adopta el contrato r19 de Volver arriba; las 18 implementaciones observadas permanecen sin migración.
Preparando comparación histórica…
Antes / r19
La comparación convierte una regla abstracta en una diferencia visible y verificable.
- Conserva el namebrand canónico y el contexto en una línea separada.
- Mantén cuenta, navegación y destino actual en lugares predecibles.
CISTítulo debajo del namebrandMenú distinto en esta página
- No inventes abreviaturas ni cambies mayúsculas del namebrand.
- No cambies navbar o footer entre páginas del mismo sitio.
Responsive
La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.
Cobertura
| Dimensión | Contrato |
|---|---|
| Propietario canónico | Sistema de diseño CIS · core/core-style |
| Consumidores | CIS, CDS, COCHID y todos los sitios |
| Dependencias | HTML nativo, cis-auth para sesión |
| Estado | candidato |
Evidencia de adopción
Patrón observado. 18 implementaciones observadas en 8 repositorios.
La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.
| Dato | Resultado |
|---|---|
| Clasificación | Patrón observado |
| Implementaciones | 18 implementaciones observadas |
| Repositorios | cds/cis/cis-librospa, cds/cis/periodismo2-frontend, cis/cis-www, cochid/cochid-cables, cochid/cochid-datos, cochid/cochid-mapas, cochid/cochid-scribe, cochid/cochid-tpte |
| Snapshot | kit/componentes/componentes-observados.json |
Consumidores observados
El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.
Estados
| Estado requerido |
|---|
| base |
| actual |
| móvil |
| sin sesión |
Accesibilidad
- Conserva nombre accesible, orden de lectura y foco visible.
- Funciona a 320 px, con zoom de 200% y texto largo.
- El color nunca es la única señal de estado o acción.
- El contenido esencial permanece disponible sin JavaScript.
Código HTML
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<a class="ui-sample ui-back-link" data-back-to-top href="#contenido">↑ Volver arriba</a>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<a class="ui-sample ui-back-link border border-slate-300 bg-white p-4 text-slate-950 underline underline-offset-4" data-back-to-top href="#contenido">↑ Volver arriba</a>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
import type { AnchorHTMLAttributes, ReactNode } from "react";
export interface BackToTopProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
/** Texto del enlace, sin la flecha: el componente antepone «↑ ». */
children?: ReactNode;
}
/**
* Enlace al comienzo de la página o del artículo, al final de un texto largo.
*
* `href` apunta al id del contenido principal (`#contenido`), así funciona sin JavaScript.
*
* @example <BackToTop href="#articulo">Volver al inicio del artículo</BackToTop>
*/
export function BackToTop({ children = "Volver arriba", className, href = "#contenido", ...rest }: BackToTopProps) {
return (
<a className={["ui-back-link", className].filter(Boolean).join(" ")} data-back-to-top href={href} {...rest}>
{typeof children === "string" || typeof children === "number" ? `↑ ${children}` : <>↑ {children}</>}
</a>
);
}