Pie de figura.
Patrón canónico de pie de figura 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.
Ver y copiar el código de este render
<figure class="ui-sample ui-content" data-figure-caption="true"><svg role="img" aria-label="Trama de 24 manzanas; siete aparecen marcadas con cambio" width="100%" height="160" viewBox="0 0 316 160" fill="none" stroke="currentColor" stroke-width="1"><rect x="4" y="4" width="31" height="44"></rect><rect x="43" y="4" width="31" height="44"></rect><rect x="82" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="4" width="31" height="44"></rect><rect x="160" y="4" width="31" height="44"></rect><rect x="199" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="4" width="31" height="44"></rect><rect x="277" y="4" width="31" height="44"></rect><rect x="4" y="56" width="31" height="44"></rect><rect x="43" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="82" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="56" width="31" height="44"></rect><rect x="160" y="56" width="31" height="44"></rect><rect x="199" y="56" width="31" height="44"></rect><rect x="238" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="277" y="56" width="31" height="44"></rect><rect x="4" y="108" width="31" height="44"></rect><rect x="43" y="108" width="31" height="44"></rect><rect x="82" y="108" width="31" height="44"></rect><rect x="121" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="160" y="108" width="31" height="44"></rect><rect x="199" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="108" width="31" height="44"></rect><rect x="277" y="108" width="31" height="44"></rect></svg><figcaption><strong>Figura 1.</strong> Cambio observado por manzana, enero a junio de 2026. Fuente: Catastro municipal.</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.
Comentario
Autoridad: CANON.md + decisión editorial de productoCambia 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 CDSCambia 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
- Pie de figura no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Pie de figura para Patrón canónico de pie de figura para periodismo2, comentario, editorial sebastián y lepp.
- Qué ocurre si respondes No
- Pie de figura 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.
- 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.
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.
<figure class="ui-sample ui-content" data-figure-caption="true"><svg role="img" aria-label="Trama de 24 manzanas; siete aparecen marcadas con cambio" width="100%" height="160" viewBox="0 0 316 160" fill="none" stroke="currentColor" stroke-width="1"><rect x="4" y="4" width="31" height="44"></rect><rect x="43" y="4" width="31" height="44"></rect><rect x="82" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="4" width="31" height="44"></rect><rect x="160" y="4" width="31" height="44"></rect><rect x="199" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="4" width="31" height="44"></rect><rect x="277" y="4" width="31" height="44"></rect><rect x="4" y="56" width="31" height="44"></rect><rect x="43" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="82" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="56" width="31" height="44"></rect><rect x="160" y="56" width="31" height="44"></rect><rect x="199" y="56" width="31" height="44"></rect><rect x="238" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="277" y="56" width="31" height="44"></rect><rect x="4" y="108" width="31" height="44"></rect><rect x="43" y="108" width="31" height="44"></rect><rect x="82" y="108" width="31" height="44"></rect><rect x="121" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="160" y="108" width="31" height="44"></rect><rect x="199" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="108" width="31" height="44"></rect><rect x="277" y="108" width="31" height="44"></rect></svg><figcaption><strong>Figura 1.</strong> Cambio observado por manzana, enero a junio de 2026. Fuente: Catastro municipal.</figcaption></figure>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<figure class="ui-sample ui-content border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-figure-caption="true"><svg class="h-auto w-full" role="img" aria-label="Trama de 24 manzanas; siete aparecen marcadas con cambio" width="100%" height="160" viewBox="0 0 316 160" fill="none" stroke="currentColor" stroke-width="1"><rect x="4" y="4" width="31" height="44"></rect><rect x="43" y="4" width="31" height="44"></rect><rect x="82" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="4" width="31" height="44"></rect><rect x="160" y="4" width="31" height="44"></rect><rect x="199" y="4" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="4" width="31" height="44"></rect><rect x="277" y="4" width="31" height="44"></rect><rect x="4" y="56" width="31" height="44"></rect><rect x="43" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="82" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="121" y="56" width="31" height="44"></rect><rect x="160" y="56" width="31" height="44"></rect><rect x="199" y="56" width="31" height="44"></rect><rect x="238" y="56" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="277" y="56" width="31" height="44"></rect><rect x="4" y="108" width="31" height="44"></rect><rect x="43" y="108" width="31" height="44"></rect><rect x="82" y="108" width="31" height="44"></rect><rect x="121" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="160" y="108" width="31" height="44"></rect><rect x="199" y="108" width="31" height="44" fill="currentColor" fill-opacity="0.35"></rect><rect x="238" y="108" width="31" height="44"></rect><rect x="277" y="108" width="31" height="44"></rect></svg><figcaption class="text-sm text-slate-600"><strong>Figura 1.</strong> Cambio observado por manzana, enero a junio de 2026. Fuente: Catastro municipal.</figcaption></figure>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
import type { ReactNode } from "react";
export interface FigureCaptionProps {
/** Rótulo numerado de la figura, en negrita («Figura 1.»); vacío se omite. */
label?: string;
/** Qué muestra la figura: variable, unidad y período. */
caption?: string;
/** Origen de los datos, con su prefijo («Fuente: …»); vacío lo oculta. */
source?: string;
/** Contenido de la figura: imagen, gráfico o mapa. Sin él se dibuja una trama de manzanas ilustrativa (SVG de 160 px de alto con `role="img"`). */
children?: ReactNode;
/** Nombre accesible de la trama ilustrativa; vacío la deja decorativa (`aria-hidden`). No se usa si pasas `children`. */
alt?: string;
className?: string;
}
/** Manzanas de la trama ilustrativa: 8 columnas por 3 filas; `marcada` indica cambio. */
const MANZANAS = Array.from({ length: 24 }, (_, i) => ({
x: 4 + (i % 8) * 39,
y: 4 + Math.floor(i / 8) * 52,
marcada: [2, 5, 9, 10, 14, 19, 21].includes(i),
}));
function trama(alt: string) {
const accesible = alt ? { role: "img", "aria-label": alt } : { "aria-hidden": true };
return (
<svg {...accesible} width="100%" height="160" viewBox="0 0 316 160" fill="none" stroke="currentColor" strokeWidth="1">
{MANZANAS.map((m, i) => (
<rect key={i} x={m.x} y={m.y} width="31" height="44" fill={m.marcada ? "currentColor" : undefined} fillOpacity={m.marcada ? 0.35 : undefined} />
))}
</svg>
);
}
/**
* Figura con pie numerado que describe lo que muestra y cita su fuente; acompaña gráficos, mapas e imágenes dentro de un artículo.
*
* @example <FigureCaption label="Figura 2." caption="Cambio observado por manzana, 2025–2026." source="Fuente: Catastro municipal."><img src="/figuras/manzanas.png" alt="Mapa de manzanas con cambios" /></FigureCaption>
*/
export function FigureCaption({
label = "Figura 1.",
caption = "Cambio observado por manzana, enero a junio de 2026.",
source = "Fuente: Catastro municipal.",
children,
alt = "Trama de 24 manzanas; siete aparecen marcadas con cambio",
className,
}: FigureCaptionProps) {
const texto = [caption, source].filter(Boolean).join(" ");
const contenido = children == null || children === false || children === "" ? null : children;
return (
<figure className={["ui-content", className].filter(Boolean).join(" ")} data-figure-caption>
{contenido ?? trama(alt)}
{label || texto ? (
<figcaption>
{label ? <strong>{label}</strong> : null}
{label && texto ? " " : null}
{texto || null}
</figcaption>
) : null}
</figure>
);
}