Leyenda de pared.

Patrón canónico de leyenda de pared para periodismo2, comentario, editorial sebastián y lepp.

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

Trabajo: herramientas
Dinero: economía
Saber: investigación
Información disponible
Datos verificados
Cuenta y acceso

Nivel 2Editorial Sebastián · variación

Lectura: artículos
Estado: política
Precaución: pendiente

Nivel 3Dentro de una página

Sitio · sección

Trabajo: herramientas
Dinero: economía
Saber: investigación
Información disponible
Datos verificados
Cuenta y acceso

Ayuda · legal · estado

Ver y copiar el código de este render

HTML del nivel canónico

<div class="ui-wall-legend" role="region" aria-label="Leyenda de la página" tabindex="0"><ul><li><svg class="ui-kit-icon" data-kit-icon="lightbulb" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg><span class="ui-wall-legend__swatch" data-environment="trabajo" aria-hidden="true"></span><span>Trabajo: herramientas</span></li><li data-family="dinero"><svg class="ui-kit-icon" data-kit-icon="calculator" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg><span>Dinero: economía</span></li><li data-family="saber"><svg class="ui-kit-icon" data-kit-icon="book-open" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M12 5v16"></path><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"></path></svg><span>Saber: investigación</span></li><li data-state="info"><svg class="ui-kit-icon" data-kit-icon="info" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><span>Información disponible</span></li><li data-state="safe"><svg class="ui-kit-icon" data-kit-icon="circle-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span>Datos verificados</span></li><li><svg class="ui-kit-icon" data-kit-icon="user" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span>Cuenta y acceso</span></li></ul></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.

comentario.cl

Comentario

Autoridad: CANON.md + decisión editorial de producto

Trabajo: herramientas
Dinero: economía
Saber: investigación
Información disponible
Datos verificados
Cuenta y acceso

Cambia en esta marca

Namebrand comentario.cl en celeste
Mayor ancho de prosa e imágenes editoriales

Permanece canónico

Chrome, foco y controles canónicos
Autoría, fecha, fuente y jerarquía semántica

circulodesantiago.cl

Editorial Sebastián

Autoridad: Feedback de revisión r14 + capa CDS

Lectura: artículos
Estado: política
Precaución: pendiente

Cambia en esta marca

Editorial Sebastián en rojo, con E y S mayúsculas
Atribución societaria a Círculo de Santiago

Permanece canónico

Caja normal y espaciado legible
Anatomía editorial y accesibilidad canónicas

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.

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

Trabajo: herramientas
Dinero: economía
Saber: investigación
Información disponible
Datos verificados
Cuenta y acceso

Prioriza título, evidencia, autoría y una prosa legible.
Usa el namebrand y el color editorial propios sin alterar el canon.

Antes · problema observadoAnti-ejemplo no interactivo

NUEVO · DESTACADO · LECTURAUn título subordinado a etiquetasLa prosa completa usa una voz técnica.

No llenes la página de epígrafes o etiquetas redundantes.
No uses JetBrains Mono como voz editorial ni prosa principal.

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

Trabajo: herramientas
Dinero: economía
Saber: investigación
Información disponible
Datos verificados
Cuenta y acceso

1280 pxEscritorio

Lectura: artículos
Estado: política
Precaución: pendiente

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y equipo editorial · core/core-style
Consumidores	Periodismo2, Comentario, Editorial Sebastián y LEPP
Dependencias	prosa canónica, metadatos editoriales
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.

Ver implementaciones asociadas a Leyenda de pared

Estados

Estado requerido
base
destacado
archivo
contenido largo

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-wall-legend" role="region" aria-label="Leyenda de la página" tabindex="0"><ul><li><svg class="ui-kit-icon" data-kit-icon="lightbulb" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg><span class="ui-wall-legend__swatch" data-environment="trabajo" aria-hidden="true"></span><span>Trabajo: herramientas</span></li><li data-family="dinero"><svg class="ui-kit-icon" data-kit-icon="calculator" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg><span>Dinero: economía</span></li><li data-family="saber"><svg class="ui-kit-icon" data-kit-icon="book-open" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M12 5v16"></path><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"></path></svg><span>Saber: investigación</span></li><li data-state="info"><svg class="ui-kit-icon" data-kit-icon="info" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><span>Información disponible</span></li><li data-state="safe"><svg class="ui-kit-icon" data-kit-icon="circle-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span>Datos verificados</span></li><li><svg class="ui-kit-icon" data-kit-icon="user" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span>Cuenta y acceso</span></li></ul></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-wall-legend border border-slate-300 bg-white p-4 text-slate-950" role="region" aria-label="Leyenda de la página" tabindex="0"><ul class="grid gap-2"><li><svg class="ui-kit-icon h-auto w-full" data-kit-icon="lightbulb" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg><span class="ui-wall-legend__swatch" data-environment="trabajo" aria-hidden="true"></span><span>Trabajo: herramientas</span></li><li data-family="dinero"><svg class="ui-kit-icon h-auto w-full" data-kit-icon="calculator" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><rect width="16" height="20" x="4" y="2" rx="2"></rect><line x1="8" x2="16" y1="6" y2="6"></line><line x1="16" x2="16" y1="14" y2="18"></line><path d="M16 10h.01"></path><path d="M12 10h.01"></path><path d="M8 10h.01"></path><path d="M12 14h.01"></path><path d="M8 14h.01"></path><path d="M12 18h.01"></path><path d="M8 18h.01"></path></svg><span>Dinero: economía</span></li><li data-family="saber"><svg class="ui-kit-icon h-auto w-full" data-kit-icon="book-open" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M12 5v16"></path><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"></path></svg><span>Saber: investigación</span></li><li data-state="info"><svg class="ui-kit-icon h-auto w-full" data-kit-icon="info" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><span>Información disponible</span></li><li data-state="safe"><svg class="ui-kit-icon h-auto w-full" data-kit-icon="circle-check" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg><span>Datos verificados</span></li><li><svg class="ui-kit-icon h-auto w-full" data-kit-icon="user" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span>Cuenta y acceso</span></li></ul></div>

Código REACT

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

Código de referencia

import { KitIcon } from './kit-icon';
import type { KitIconName } from './kit-icon';
import type { KitFamily } from './family-chip';
import type { KitState } from './state-notice';

export type KitEnvironment = 'lectura' | 'trabajo' | 'datos' | 'acogida' | 'servicio';
export type WallLegendEntry = {
  icon: KitIconName;
  label: string;
} & ({environment:KitEnvironment;family?:never;state?:never} |
     {family:KitFamily;environment?:never;state?:never} |
     {state:KitState;environment?:never;family?:never} |
     {environment?:never;family?:never;state?:never});
export interface WallLegendProps {
  entries: readonly WallLegendEntry[];
  label?: string;
  className?: string;
}
/** Una sola línea con desplazamiento interno. No introduce overflow del body. */
export function WallLegend({entries,label='Leyenda de la página',className}:WallLegendProps) {
  if(entries.length>6) throw new RangeError('La leyenda admite como máximo seis entradas');
  if(entries.some(entry=>!entry.label.trim())) throw new TypeError('Cada entrada necesita un nombre visible');
  return <div className={['ui-wall-legend',className].filter(Boolean).join(' ')} role="region"
    aria-label={label} tabIndex={0}>
    <ul>{entries.map((entry,index)=><li key={index} data-family={entry.family} data-state={entry.state}>
      <KitIcon name={entry.icon} size={16}/>
      {entry.environment?<span className="ui-wall-legend__swatch" data-environment={entry.environment} aria-hidden="true"/>:null}
      <span>{entry.label}</span>
    </li>)}</ul>
  </div>;
}