Política
Chip de familia.
Patrón canónico de chip de familia 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.
Documentos
Ver y copiar el código de este render
<span class="ui-family-chip" data-family="estado"><svg class="ui-kit-icon" data-kit-icon="landmark" 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="M10 18v-7"></path><path d="M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"></path><path d="M14 18v-7"></path><path d="M18 18v-7"></path><path d="M3 22h18"></path><path d="M6 18v-7"></path></svg><span>Política</span></span>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
Autoridad: CANON.md + decisión editorial de productoPolítica
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
Editorial Sebastián
Autoridad: Feedback de revisión r14 + capa CDSDocumentos
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.
- Estado actual
- Chip de familia no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Chip de familia para Patrón canónico de chip de familia para periodismo2, comentario, editorial sebastián y lepp.
- Qué ocurre si respondes No
- Chip de familia 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.
Política
- Prioriza título, evidencia, autoría y una prosa legible.
- Usa el namebrand y el color editorial propios sin alterar el canon.
NUEVO · DESTACADO · LECTURAUn título subordinado a etiquetas
La 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.
Política
Documentos
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.
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.
<span class="ui-family-chip" data-family="estado"><svg class="ui-kit-icon" data-kit-icon="landmark" 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="M10 18v-7"></path><path d="M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"></path><path d="M14 18v-7"></path><path d="M18 18v-7"></path><path d="M3 22h18"></path><path d="M6 18v-7"></path></svg><span>Política</span></span>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<span class="ui-family-chip border border-slate-300 bg-white p-4 text-slate-950" data-family="estado"><svg class="ui-kit-icon h-auto w-full" data-kit-icon="landmark" 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="M10 18v-7"></path><path d="M11.119 2.205a2 2 0 0 1 1.762 0l7.84 3.846A.5.5 0 0 1 20.5 7h-17a.5.5 0 0 1-.22-.949z"></path><path d="M14 18v-7"></path><path d="M18 18v-7"></path><path d="M3 22h18"></path><path d="M6 18v-7"></path></svg><span>Política</span></span>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
import type { ReactNode } from 'react';
import { KitIcon } from './kit-icon';
import type { KitIconName } from './kit-icon';
export type KitFamily = 'estado' | 'dinero' | 'saber' | 'territorio' | 'cultura';
export interface FamilyChipProps {
/** Se omite en portadas, servicios, formatos y listas densas. */
family?: KitFamily;
icon: KitIconName;
children: ReactNode;
className?: string;
}
export function FamilyChip({family,icon,children,className}:FamilyChipProps) {
return <span className={['ui-family-chip',className].filter(Boolean).join(' ')} data-family={family}>
<KitIcon name={icon} size={16}/><span>{children}</span>
</span>;
}