Imagen: Martín Illanes · 2026
Crédito de imagen.
Patrón canónico de crédito de imagen 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.
Imagen: Archivo Círculo de Santiago · CC BY 4.0
Imagen: Martín Illanes · 2026
Ver y copiar el código de este render
<p class="ui-sample" data-image-credit>Imagen: <a href="#obra">Martín Illanes</a> · 2026</p>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 productoImagen: Martín Illanes · 2026
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 CDSImagen: Archivo Círculo de Santiago · CC BY 4.0
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
- Crédito de imagen no tiene una implementación vigente demostrada; sus ejemplos son material candidato.
- Cambio propuesto
- Publicar en r19 el contrato de Crédito de imagen para Patrón canónico de crédito de imagen para periodismo2, comentario, editorial sebastián y lepp.
- Qué ocurre si respondes No
- Crédito de imagen 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.
Imagen: Martín Illanes · 2026
- 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.
Imagen: Martín Illanes · 2026
Imagen: Archivo Círculo de Santiago · CC BY 4.0
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.
<p class="ui-sample" data-image-credit>Imagen: <a href="#obra">Martín Illanes</a> · 2026</p>Código TAILWIND
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
<p class="ui-sample border border-slate-300 bg-white p-4 text-slate-950" data-image-credit>Imagen: <a class="underline underline-offset-4" href="#obra">Martín Illanes</a> · 2026</p>Código REACT
Copia el bloque completo; después cambia contenido y destinos, no su anatomía.
export interface ImageCreditProps {
/** Rótulo que antecede al crédito; vacío se omite. */
prefix?: string;
/** Autor de la imagen o archivo que la conserva. */
credit?: string;
/** Enlace a la obra original o a la ficha del archivo; vacío deja el crédito sin enlace. */
href?: string;
/** Año, licencia o ambos («2026 · CC BY 4.0»); vacío lo oculta. */
detail?: string;
className?: string;
}
/**
* Crédito de una imagen con su autor o archivo, enlace a la obra y año o licencia; va bajo una fotografía, ilustración o mapa.
*
* @example <ImageCredit credit="Archivo Círculo de Santiago" href="/archivo/obra-12" detail="CC BY 4.0" />
* @example <ImageCredit credit="Martín Illanes" href="" detail="2026" />
*/
export function ImageCredit({
prefix = "Imagen:",
credit = "Martín Illanes",
href = "#obra",
detail = "2026",
className,
}: ImageCreditProps) {
if (!credit && !detail) return null;
return (
<p className={className} data-image-credit>
{prefix ? `${prefix} ` : null}
{credit ? (href ? <a href={href}>{credit}</a> : credit) : null}
{credit && detail ? " · " : null}
{detail || null}
</p>
);
}