Fuente.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

<cite class="ui-sample badge" data-source-badge="true"><a href="#fuente-ine">INE · ENE</a> · <span>actualización mensual</span></cite>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

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.

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

Cobertura

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.

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 Fuente

Estados

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.

<cite class="ui-sample badge" data-source-badge="true"><a href="#fuente-ine">INE · ENE</a> · <span>actualización mensual</span></cite>

Código TAILWIND

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

<cite class="ui-sample badge border border-slate-300 bg-white p-4 text-slate-950" data-source-badge="true"><a class="underline underline-offset-4" href="#fuente-ine">INE · ENE</a> · <span>actualización mensual</span></cite>

Código REACT

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

export interface SourceBadgeProps {
  /** Nombre corto de la fuente (institución · producto). */
  label?: string;
  /** Enlace a la ficha de la fuente o a la nota metodológica; vacío deja el nombre sin enlace. */
  href?: string;
  /** Texto complementario: periodicidad o tipo de fuente. */
  detail?: string;
  className?: string;
}

/**
 * Insignia que cita la fuente de un dato, con enlace a su ficha y un detalle breve (periodicidad o tipo de fuente).
 *
 * El nombre y el detalle van separados por « · » en el propio texto.
 *
 * @example <SourceBadge label="INE · ENE" href="#fuente-ine" detail="actualización mensual" />
 * @example <SourceBadge label="Banco Central · BDE" href="/fuentes/bcentral" detail="fuente primaria" />
 */
export function SourceBadge({ label = "INE · ENE", href = "#fuente-ine", detail = "actualización mensual", className }: SourceBadgeProps) {
  return (
    <cite className={["badge", className].filter(Boolean).join(" ")} data-source-badge>
      {label ? (href ? <a href={href}>{label}</a> : label) : null}
      {label && detail ? " · " : null}
      {detail ? <span>{detail}</span> : null}
    </cite>
  );
}