Referencia interna · no indexada
Catálogo de componentes
Catálogo ampliado: 70 piezas de interfaz habituales maquetadas con la línea visual Colefruse. Uso: inspiración, alineación con cliente y checklist al crear una nueva línea de estilo.
URL directa: componentes.php
· Volver al inicio
1. Tipografía
1 · Jerarquía de títulos
Título de página (H1)
Título de sección (H2)
Subtítulo o bloque (H3)
2 · Párrafo destacado (lead)
Texto introductorio más grande, útil en cabeceras de página o resúmenes ejecutivos.
3 · Cuerpo y enlace en línea
Párrafo estándar con buena legibilidad. Incluye un enlace contextual al contacto o a otra página relevante.
4 · Texto pequeño / metadata
Actualizado · 12 min lectura · Categoría calidad
2. Botones y enlaces
5 · Botón primario
6 · Botón primario deshabilitado
7 · Botón ghost (sobre oscuro)
8 · Botón pequeño
9 · Botón contacto (CTA correo)
10 · Enlace de texto
3. Formularios
11 · Campo de texto
12 · Campo con error
13 · Área de texto
14 · Desplegable
15 · Checkbox
16 · Radio (grupo)
17 · Interruptor (toggle)
18 · Búsqueda con icono
4. Listas
19 · Lista con viñetas
- Trazabilidad de lote documentada
- Análisis en laboratorio acreditado
- Formato a medida bajo pedido
20 · Lista numerada
- Solicitud y registro
- Validación técnica
- Confirmación y envío
21 · Lista tipo checklist (acento marca)
- Certificaciones al día y accesibles para auditoría
- Personal formado en buenas prácticas de higiene
- Registros revisables y trazables
5. Tablas y datos
22 · Tabla de datos
| Referencia | Formato | Plazo |
|---|---|---|
| ALM-NAT-25 | Granel | 72 h |
| PAST-FINA | Bidón | Bajo consulta |
23 · Lista de definición
- Origen
- Unión Europea, trazable
- Alérgenos
- Frutos de cáscara (almendra)
6. Tarjetas e imagen
24 · Tarjeta producto (patrón visual)
Almendra natural
Ver ficha25 · Tarjeta mini (horizontal)
Pasta fina
Texto breve de apoyo para decisión o navegación.
Ver detalle26 · Figura con pie
27 · Avatar + nombre
María Ríos
Calidad y seguridad alimentaria
28 · Insignias / badges
29 · Chips / filtros
8. Feedback y estado
32 · Cita / testimonio
«La consistencia en lote tras lote es lo que nos hace repetir con el mismo proveedor.»
33 · KPI / número destacado
34 · Barra de progreso
72 % completado
35 · Alertas
No se pudo guardar. Revise los campos marcados.
Cambios guardados correctamente.
Información: el plazo de entrega puede variar según volumen.
36 · Estado vacío
37 · Placeholder de carga (skeleton)
9. Contenedores
38 · Panel / tarjeta plana
Título del panel
Contenido auxiliar, notas o resumen de un bloque.
39 · Separador
Texto superior
Texto inferior
40 · Tarjeta información (contacto)
Canales
10. Acordeón y modal
41 · Acordeón (details)
¿Cómo solicito una ficha técnica?
Use el formulario de contacto indicando referencia y volumen aproximado. Le responderemos en horario laboral.
¿Trabajan exportación?
Sí, bajo condiciones comerciales y documentación acordadas caso a caso.
42 · Modal (diálogo nativo)
11. Paginación y pasos
43 · Paginación
44 · Indicador de pasos
- Datos
- Revisión
- Confirmación
12. Bloques de marca
45 · Bloque heading + regla (CTA sección)
¿Necesita asesoramiento?
Estamos a su disposición
46 · Título de sección + subtítulo
Productos destacados
Nadie trata la almendra como nosotros
47 · Banda CTA (fondo crema)
Muestras bajo pedido
Contactar48 · Texto legal / pie de página
49 · Tooltip (atributo title)
Pase el cursor sobre GMP para ver la ayuda contextual.
50 · Carrusel — controles (extracto)
El carrusel completo del inicio combina imágenes, puntos y flechas. Referencia visual de controles:
13. Más componentes
51 · Grupo campo + botón (inline)
52 · Control deslizante (rango)
53 · Adjuntar archivo
54 · Indicador de carga (spinner)
55 · Valoración por estrellas
56 · Línea de tiempo vertical
-
Recepción
Verificación documental y muestreo inicial.
-
Proceso
Trazabilidad en línea y registros de proceso.
-
Expedición
Control final y documentación de lote.
57 · Migas sobre fondo oscuro
58 · Fila de KPIs (tres métricas)
59 · Bloque de código
lote_id = "ALM-2026-0142"
origen = "UE"
estado = "aprobado"60 · Tecla de teclado (kbd)
Pulse Ctrl + K para buscar (ejemplo).
61 · Aviso tipo toast (estático)
62 · Menú desplegable (details)
Más acciones
63 · Imagen con overlay
64 · Botones solo icono
65 · Franja de confianza (logos)
66 · Cinta esquina (etiqueta)
Referencia 2026
Contenido de la tarjeta con insignia en esquina.
67 · Comparativa dos columnas
Estándar
- Trazabilidad básica
- Formato granel
Premium
- Documentación ampliada
- Muestreo reforzado
68 · Banner de aviso ancho
70 · Notificación con badge