Volver.
Patrón canónico de volver 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
<div class="ui-sample"><a class="ui-back-link" rel="prev" href="#anterior">← Volver a componentes</a></div>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 no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Volver para Patrón canónico de volver para cis, cds, cochid y todos los sitios.
- Qué ocurre si respondes No
- Volver queda fuera de r19 y sus ejemplos siguen sólo como evidencia pendiente de reformulació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 propuesto. 0 implementaciones observadas en 0 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 propuesto |
| Implementaciones | 0 implementaciones observadas |
| Repositorios | Ningún repositorio observado |
| 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.
<div class="ui-sample"><a class="ui-back-link" rel="prev" href="#anterior">← Volver a componentes</a></div>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<div class="ui-sample border border-slate-300 bg-white p-4 text-slate-950"><a class="ui-back-link underline underline-offset-4" rel="prev" href="#anterior">← Volver a componentes</a></div>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 BackLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
/** Destino del regreso, sin la flecha: el componente antepone «← ». */
children?: ReactNode;
}
/**
* Enlace para volver a la página anterior de la jerarquía (listado, resultados, índice), sobre el título de la vista.
*
* Es un `<a rel="prev">`: pasa en `href` la dirección real del listado, no `history.back()`.
*
* @example <BackLink href="/buscar?q=salud">Volver a resultados</BackLink>
*/
export function BackLink({ children = "Volver a componentes", className, rel = "prev", href = "#anterior", ...rest }: BackLinkProps) {
return (
<a className={["ui-back-link", className].filter(Boolean).join(" ")} rel={rel} href={href} {...rest}>
{typeof children === "string" || typeof children === "number" ? `← ${children}` : <>← {children}</>}
</a>
);
}