Saltar al contenido
COMPAÑÍADE INNOVACIÓNDE SANTIAGO Style v10Sistema de diseño
Revisión
Menú
Índice de Kit UI
Kit UI Componentes

Título contextual.

Patrón canónico de título contextual 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.

Nivel 1Componente canónico
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Style v10

Nivel 2Círculo de Santiago · variación
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Cuenta

Nivel 3Dentro de una página
Sitio · sección
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Style v10

Ayuda · legal · estado
Ver y copiar el código de este render
HTML del nivel canónico
<div class="ui-sample ui-context-title" data-context-title><span class="ui-lockup"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></span><span role="separator"></span><h2>Style v10</h2></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.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Style v10

Cambia 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
circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Cuenta

Cambia 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
Título contextual no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
Cambio propuesto
Publicar en r19 el contrato de Título contextual para Patrón canónico de título contextual para cis, cds, cochid y todos los sitios.
Qué ocurre si respondes No
Título contextual 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.

r19 · correctoContrato canónico renderizado
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Style v10

  • Conserva el namebrand canónico y el contexto en una línea separada.
  • Mantén cuenta, navegación y destino actual en lugares predecibles.
Antes · problema observadoAnti-ejemplo no interactivo
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.

320 pxMóvil y zoom
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Style v10

1280 pxEscritorio
COMPAÑÍA
DE INNOVACIÓN
DE SANTIAGO

Cuenta

Cobertura

DimensiónContrato
Propietario canónicoSistema de diseño CIS · core/core-style
ConsumidoresCIS, CDS, COCHID y todos los sitios
DependenciasHTML nativo, cis-auth para sesión
Estadocandidato

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.

DatoResultado
ClasificaciónPatrón propuesto
Implementaciones0 implementaciones observadas
RepositoriosNingún repositorio observado
Snapshotkit/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.

Ver implementaciones asociadas a Título contextual

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.

Código de referencia
<div class="ui-sample ui-context-title" data-context-title><span class="ui-lockup"><svg class="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></span><span role="separator"></span><h2>Style v10</h2></div>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
<div class="ui-sample ui-context-title border border-slate-300 bg-white p-4 text-slate-950" data-context-title><span class="ui-lockup"><svg class="ui-lockup__mark h-auto w-full" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" stroke-width="4"></circle><circle cx="100" cy="100" r="56" stroke-width="18"></circle></svg><strong>COMPAÑÍA<br>DE INNOVACIÓN<br>DE SANTIAGO</strong></span><span role="separator"></span><h2>Style v10</h2></div>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia
const NAME_LINES = ["COMPAÑÍA", "DE INNOVACIÓN", "DE SANTIAGO"];

export interface ContextTitleProps {
  /** Nombre de la sección o herramienta que se muestra junto al lockup. */
  title?: string;
  /** Nombre de la Compañía, una línea por elemento. */
  nameLines?: string[];
  className?: string;
}

/**
 * Título contextual: lockup de la Compañía, separador y nombre de la sección o herramienta en curso; encabeza vistas internas.
 *
 * @example <ContextTitle title="Style v10" />
 * @example <ContextTitle title="Cuenta" />
 */
export function ContextTitle({ title = "Style v10", nameLines = NAME_LINES, className }: ContextTitleProps) {
  return (
    <div className={["ui-context-title", className].filter(Boolean).join(" ")} data-context-title>
      <span className="ui-lockup">
        <svg className="ui-lockup__mark" viewBox="0 0 200 200" fill="none" stroke="currentColor" aria-hidden="true"><circle cx="100" cy="100" r="92" strokeWidth="4"></circle><circle cx="100" cy="100" r="56" strokeWidth="18"></circle></svg>
        {nameLines.length ? <strong>{nameLines.flatMap((linea, i) => (i ? [<br key={i} />, linea] : [linea]))}</strong> : null}
      </span>
      {title ? <><span role="separator"></span><h2>{title}</h2></> : null}
    </div>
  );
}