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

Rampa secuencial.

Patrón canónico de rampa secuencial para cochid, periodismo2, situación y admin.

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
  1. Menor valor
  2. Valor intermedio
  3. Mayor valor
Rampa secuencial de ejemplo, sin datos reales.
Nivel 2Compañía de Innovación de Santiago · variación
  1. 0 a 10
  2. Más de 10 a 20
  3. Más de 20 a 30
Rampa secuencial de ejemplo, sin datos reales.
Nivel 3Dentro de una página
Sitio · sección
  1. Menor valor
  2. Valor intermedio
  3. Mayor valor
Rampa secuencial de ejemplo, sin datos reales.
Ayuda · legal · estado
Ver y copiar el código de este render
HTML del nivel canónico
<figure class="ui-sample ui-sequential-ramp" data-sequential-ramp="true"><ol><li><span class="ui-sequential-ramp__swatch" data-step="1" aria-hidden="true"></span><span>Menor valor</span></li><li><span class="ui-sequential-ramp__swatch" data-step="2" aria-hidden="true"></span><span>Valor intermedio</span></li><li><span class="ui-sequential-ramp__swatch" data-step="3" aria-hidden="true"></span><span>Mayor valor</span></li></ol><figcaption>Rampa secuencial de ejemplo, sin datos reales.</figcaption></figure>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

cochid.cl

COCHID

Autoridad: core-style/DECISIONES.md M15 y LOGOS-CANONICOS.md
  1. Menor valor
  2. Valor intermedio
  3. Mayor valor
Rampa secuencial de ejemplo, sin datos reales.

Cambia en esta marca

  • Cuadrado azul y namebrand de tres líneas
  • Azul COCHID en selección, capas y series

Permanece canónico

  • Estructura y semántica comunes
  • Fuentes, unidades y alternativa tabular
innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md
  1. 0 a 10
  2. Más de 10 a 20
  3. Más de 20 a 30
Rampa secuencial de ejemplo, sin datos reales.

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

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
Rampa secuencial no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
Cambio propuesto
Publicar en r19 el contrato de Rampa secuencial para Patrón canónico de rampa secuencial para cochid, periodismo2, situación y admin.
Qué ocurre si respondes No
Rampa secuencial 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
  1. Menor valor
  2. Valor intermedio
  3. Mayor valor
Rampa secuencial de ejemplo, sin datos reales.
  • Incluye fuente, período, unidad y alternativa tabular.
  • Usa escalas comparables y distingue cero de ausencia.
Antes · problema observadoAnti-ejemplo no interactivo
62%CONFIRMADOSin fuente, período ni denominador
  • No encierres una cifra aislada en una tarjeta decorativa.
  • No declares estados o tendencias que no provienen de datos reales.

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
  1. Menor valor
  2. Valor intermedio
  3. Mayor valor
Rampa secuencial de ejemplo, sin datos reales.
1280 pxEscritorio
  1. 0 a 10
  2. Más de 10 a 20
  3. Más de 20 a 30
Rampa secuencial de ejemplo, sin datos reales.

Cobertura

DimensiónContrato
Propietario canónicoSistema de diseño CIS y COCHID · core/core-style
ConsumidoresCOCHID, Periodismo2, Situación y Admin
Dependenciascochid-graphs cuando corresponde
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 Rampa secuencial

Estados

Estado requerido
con datos
sin datos
cargando
error

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
<figure class="ui-sample ui-sequential-ramp" data-sequential-ramp="true"><ol><li><span class="ui-sequential-ramp__swatch" data-step="1" aria-hidden="true"></span><span>Menor valor</span></li><li><span class="ui-sequential-ramp__swatch" data-step="2" aria-hidden="true"></span><span>Valor intermedio</span></li><li><span class="ui-sequential-ramp__swatch" data-step="3" aria-hidden="true"></span><span>Mayor valor</span></li></ol><figcaption>Rampa secuencial de ejemplo, sin datos reales.</figcaption></figure>

Código TAILWIND

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

Código de referencia
<figure class="ui-sample ui-sequential-ramp border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-sequential-ramp="true"><ol class="grid gap-2"><li><span class="ui-sequential-ramp__swatch" data-step="1" aria-hidden="true"></span><span>Menor valor</span></li><li><span class="ui-sequential-ramp__swatch" data-step="2" aria-hidden="true"></span><span>Valor intermedio</span></li><li><span class="ui-sequential-ramp__swatch" data-step="3" aria-hidden="true"></span><span>Mayor valor</span></li></ol><figcaption class="text-sm text-slate-600">Rampa secuencial de ejemplo, sin datos reales.</figcaption></figure>

Código REACT

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

Código de referencia
export interface SequentialRampProps {
  labels?: [string,string,string];
  caption?: string;
  className?: string;
}

/** Leyenda discreta: tres niveles de menor a mayor valor, con texto fuera del color. */
export function SequentialRamp({labels=['Menor valor','Valor intermedio','Mayor valor'],caption='Rampa secuencial de ejemplo, sin datos reales.',className}:SequentialRampProps){
  return <figure className={['ui-sequential-ramp',className].filter(Boolean).join(' ')} data-sequential-ramp>
    <ol>{labels.map((label,i)=><li key={i}><span className="ui-sequential-ramp__swatch" data-step={i+1} aria-hidden="true"></span><span>{label}</span></li>)}</ol>
    <figcaption>{caption}</figcaption>
  </figure>;
}