libreria-astro-lefebvre/src/carbins/Contenido_2025_Cordoba.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2025_Cordoba',
  category: 'Contenido de Texto',
  name: 'Ítem con icono grande de certificación y título configurable 2025',
  description: 'Ítem para destacar una certificación, acreditación o hito con un icono grande (5 variantes predefinidas: IA, ISO1, ISO2, GDPR, ISO3), título con etiqueta HTML seleccionable entre h1-h6/span (cada opción con tamaño y alineación distintos) y descripción centrada. Layout flex configurable: horizontal (icono al lado) o vertical (icono encima), con control de alineación vertical entre icono y texto',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'icono', 'certificacion', 'item'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título del contenido. Se renderiza con la etiqueta HTML seleccionada en "Etiqueta del título" (h1-h6 o span). No admite HTML',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Certificación ISO 27001'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del título. Se muestra siempre centrada y como texto plano (no admite HTML)',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Gestión de la seguridad de la información conforme a estándares internacionales'
    },
    {
      name: 'tipo',
      type: 'select',
      help: 'Etiqueta HTML y tamaño del título. Cada opción aplica estilos distintos: "h1" 56px alineado a la izquierda, "h2" 40px izquierda, "h3" 2xl semibold izquierda, "h3-center" 2xl semibold centrado, "h4" 2xl semibold izquierda, "h5"/"h6" sin estilos, "span" texto gris sin formato',
      label: 'Etiqueta del título',
      options: ['h1', 'h2', 'h3', 'h3-center', 'h4', 'h5', 'h6', 'span'],
      options_labels: ['H1', 'H2', 'H3', 'H3 centrado', 'H4', 'H5', 'H6', 'Span'],
      example_value: 'h2'
    },
    {
      name: 'showBigIco',
      type: 'boolean',
      help: 'Si está activado, muestra el icono grande seleccionado en el campo "Icono". Si está desactivado, NO se muestra nada en el hueco del icono (se renderiza un espacio vacío)',
      label: 'Mostrar icono grande',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'bigIcon',
      type: 'select',
      help: 'Icono grande que se muestra junto al contenido (solo si "Mostrar icono grande" está activado). Si se elige un valor fuera de la lista, no aparece ningún icono',
      label: 'Icono',
      options: ['bigIA', 'bigIso1', 'bigIso2', 'bigGDPR', 'bigIso3'],
      options_labels: ['IA', 'Iso1', 'Iso2', 'GDPR', 'Iso3'],
      example_value: 'bigIso2'
    },
    {
      name: 'bigIconUrl',
      type: 'text',
      help: 'URL de descarga del icono. Si se rellena, el icono se convierte en un enlace de descarga (atributo download). Si se deja vacío, el icono se muestra sin enlace. ATENCIÓN: el navegador solo fuerza la descarga si el archivo es del mismo origen',
      label: 'Enlace de descarga del icono',
      mandatory: false,
      example_value: '/files/certificado-iso.pdf'
    },
    {
      name: 'positionFlex',
      type: 'select',
      help: 'Alineación vertical del icono respecto al bloque de texto. "Principio" alinea ambos arriba, "Centrado" los centra verticalmente',
      label: 'Posición del item',
      options: ['items-start', 'items-center'],
      options_labels: ['Principio', 'Centrado'],
      example_value: 'items-start'
    },
    {
      name: 'flexOrientationIcoText',
      type: 'select',
      help: 'Orientación del icono respecto al texto. "Horizontal" coloca el icono al lado del texto y el item ocupa todo el ancho disponible. "Vertical" apila el icono encima del texto y el item ocupa un ancho reducido (50% en móvil, 20% en desktop)',
      label: 'Flex del item',
      options: ['flex-row', 'flex-col'],
      options_labels: ['Horizontal', 'Vertical'],
      example_value: 'flex-row'
    },
   ]
};