Encabezado de familia.
Patrón canónico de encabezado 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.
Investigaciones
Economía
Ver y copiar el código de este render
<h2 class="ui-family-heading"><span class="ui-family-square" data-family="dinero"><svg class="ui-kit-icon" data-kit-icon="trending-up" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg></span><span>Economía</span></h2>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 productoEconomía
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 CDSInvestigaciones
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
- Encabezado de familia no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Encabezado de familia para Patrón canónico de encabezado de familia para periodismo2, comentario, editorial sebastián y lepp.
- Qué ocurre si respondes No
- Encabezado 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.
Economía
- 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.
Economía
Investigaciones
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.
<h2 class="ui-family-heading"><span class="ui-family-square" data-family="dinero"><svg class="ui-kit-icon" data-kit-icon="trending-up" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg></span><span>Economía</span></h2>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<h2 class="ui-family-heading border border-slate-300 bg-white p-4 text-slate-950"><span class="ui-family-square" data-family="dinero"><svg class="ui-kit-icon h-auto w-full" data-kit-icon="trending-up" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" focusable="false" aria-hidden="true"><path d="M16 7h6v6"></path><path d="m22 7-8.5 8.5-5-5L2 17"></path></svg></span><span>Economía</span></h2>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';
import type { KitFamily } from './family-chip';
export interface FamilyHeadingProps {
family?: KitFamily;
icon: KitIconName;
children: ReactNode;
as?: 'h1' | 'h2' | 'h3' | 'h4';
className?: string;
}
export function FamilyHeading({family,icon,children,as:Heading='h2',className}:FamilyHeadingProps) {
return <Heading className={['ui-family-heading',className].filter(Boolean).join(' ')}>
<span className="ui-family-square" data-family={family}><KitIcon name={icon} size={24}/></span>
<span>{children}</span>
</Heading>;
}