Categoría · Interactivo Nivel de Dificultad · Intermedio Publicado el · 20 de enero de 2025
Componente FAQ Estilo Cuadrícula
Un componente FAQ moderno con diseño de cuadrícula, filtrado por categorías y diseño de tarjetas interactivas
#faq #grid #cards #filter #responsive #interactivo
Diseño Responsivo
Sí
Soporte para Modo Oscuro
No
líneas
3
Compatibilidad del Navegador
No
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
Componente FAQ Estilo Cuadrícula
Un componente FAQ moderno con diseño de cuadrícula responsivo con tarjetas interactivas, filtrado por categorías y animaciones suaves.
Características
- Diseño de Cuadrícula: Cuadrícula estilo mampostería responsiva que se adapta a diferentes tamaños de pantalla
- Tarjetas Interactivas: Efectos de hover y transiciones suaves para mejor experiencia de usuario
- Filtrado por Categorías: Filtrar elementos FAQ por categoría con transiciones animadas
- Funcionalidad de Búsqueda: Búsqueda en tiempo real en todo el contenido FAQ
- Tarjetas Expandibles: Clic para expandir/contraer respuestas FAQ con animaciones suaves
- Indicadores Visuales: Iconos y insignias para diferentes categorías y estados
- Diseño Responsivo: Funciona perfectamente en escritorio, tablet y dispositivos móviles
- Accesibilidad: Navegación completa por teclado y soporte para lectores de pantalla
- Estados de Carga: Carga esqueleto para mejor rendimiento percibido
- Desplazamiento Infinito: Cargar más elementos FAQ mientras el usuario se desplaza (opcional)
Estructura HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Componente FAQ Estilo Cuadrícula</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="faq-grid-container">
<!-- Encabezado -->
<div class="faq-header">
<h1>Preguntas Frecuentes</h1>
<p>Encuentra respuestas a preguntas comunes organizadas en un diseño de cuadrícula fácil de navegar</p>
</div>
<!-- Controles -->
<div class="faq-controls">
<!-- Barra de Búsqueda -->
<div class="search-container">
<div class="search-input-wrapper">
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
<input type="text"
class="search-input"
placeholder="Buscar FAQ..."
aria-label="Buscar FAQ">
<button class="clear-search" style="display: none;" aria-label="Limpiar búsqueda">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
</div>
<!-- Filtros de Categoría -->
<div class="category-filters">
<button class="filter-btn active" data-category="all">
<span class="filter-icon">🌟</span>
<span>Todas</span>
<span class="count">12</span>
</button>
<button class="filter-btn" data-category="general">
<span class="filter-icon">📋</span>
<span>General</span>
<span class="count">4</span>
</button>
<button class="filter-btn" data-category="billing">
<span class="filter-icon">💳</span>
<span>Facturación</span>
<span class="count">3</span>
</button>
<button class="filter-btn" data-category="technical">
<span class="filter-icon">⚙️</span>
<span>Técnico</span>
<span class="count">3</span>
</button>
<button class="filter-btn" data-category="support">
<span class="filter-icon">🎧</span>
<span>Soporte</span>
<span class="count">2</span>
</button>
</div>
<!-- Opciones de Vista -->
<div class="view-options">
<button class="view-btn active" data-view="grid" aria-label="Vista de cuadrícula">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
</button>
<button class="view-btn" data-view="list" aria-label="Vista de lista">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
</button>
</div>
</div>
<!-- Información de Resultados -->
<div class="results-info">
<span class="results-count">Mostrando 12 de 12 preguntas</span>
<div class="sort-options">
<label for="sort-select">Ordenar por:</label>
<select id="sort-select" class="sort-select">
<option value="relevance">Relevancia</option>
<option value="date">Fecha de Actualización</option>
<option value="popularity">Popularidad</option>
<option value="alphabetical">Alfabético</option>
</select>
</div>
</div>
<!-- Cuadrícula FAQ -->
<div class="faq-grid" data-view="grid">
<!-- Tarjeta FAQ 1 -->
<div class="faq-card" data-category="general" data-keywords="cuenta registro crear perfil configuración">
<div class="card-header">
<div class="category-badge general">
<span class="badge-icon">📋</span>
<span>General</span>
</div>
<div class="card-actions">
<button class="bookmark-btn" aria-label="Marcar esta pregunta">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<div class="card-content">
<h3 class="question-title">¿Cómo creo una cuenta?</h3>
<div class="question-preview">
Crear una cuenta es simple y solo toma unos minutos...
</div>
<div class="answer-content" style="display: none;">
<p>Crear una cuenta es simple y solo toma unos minutos. Sigue estos pasos:</p>
<ol>
<li>Haz clic en el botón "Registrarse" en la esquina superior derecha</li>
<li>Ingresa tu dirección de correo electrónico y crea una contraseña segura</li>
<li>Verifica tu dirección de correo electrónico haciendo clic en el enlace que te enviamos</li>
<li>Completa tu perfil con información básica</li>
<li>Comienza a usar todas nuestras funciones inmediatamente</li>
</ol>
<div class="helpful-section">
<span>¿Fue esto útil?</span>
<div class="helpful-buttons">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Sí
</button>
<button class="helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
No
</button>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="card-meta">
<span class="last-updated">Actualizado 15 Ene, 2024</span>
<span class="popularity">👍 24</span>
</div>
<button class="expand-btn" aria-expanded="false">
<span class="expand-text">Leer Más</span>
<svg class="expand-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
</div>
<!-- Tarjeta FAQ 2 -->
<div class="faq-card" data-category="billing" data-keywords="métodos pago tarjeta crédito paypal facturación">
<div class="card-header">
<div class="category-badge billing">
<span class="badge-icon">💳</span>
<span>Facturación</span>
</div>
<div class="card-actions">
<button class="bookmark-btn" aria-label="Marcar esta pregunta">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<div class="card-content">
<h3 class="question-title">¿Qué métodos de pago aceptan?</h3>
<div class="question-preview">
Aceptamos todos los métodos de pago principales para hacer tu experiencia conveniente...
</div>
<div class="answer-content" style="display: none;">
<p>Aceptamos todos los métodos de pago principales para hacer tu experiencia conveniente:</p>
<div class="payment-methods">
<div class="payment-category">
<h4>Tarjetas de Crédito y Débito</h4>
<ul>
<li>Visa</li>
<li>MasterCard</li>
<li>American Express</li>
<li>Discover</li>
</ul>
</div>
<div class="payment-category">
<h4>Billeteras Digitales</h4>
<ul>
<li>PayPal</li>
<li>Apple Pay</li>
<li>Google Pay</li>
<li>Samsung Pay</li>
</ul>
</div>
</div>
<div class="helpful-section">
<span>¿Fue esto útil?</span>
<div class="helpful-buttons">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Sí
</button>
<button class="helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
No
</button>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="card-meta">
<span class="last-updated">Actualizado 10 Ene, 2024</span>
<span class="popularity">👍 18</span>
</div>
<button class="expand-btn" aria-expanded="false">
<span class="expand-text">Leer Más</span>
<svg class="expand-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
</div>
<!-- Tarjeta FAQ 3 -->
<div class="faq-card" data-category="technical" data-keywords="contraseña restablecer olvidé login seguridad">
<div class="card-header">
<div class="category-badge technical">
<span class="badge-icon">⚙️</span>
<span>Técnico</span>
</div>
<div class="card-actions">
<button class="bookmark-btn" aria-label="Marcar esta pregunta">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<div class="card-content">
<h3 class="question-title">¿Cómo restablezco mi contraseña?</h3>
<div class="question-preview">
Si has olvidado tu contraseña, puedes restablecerla fácilmente...
</div>
<div class="answer-content" style="display: none;">
<p>Si has olvidado tu contraseña, puedes restablecerla fácilmente:</p>
<div class="reset-steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Ve a la Página de Inicio de Sesión</h4>
<p>Haz clic en "Olvidé mi Contraseña" en la pantalla de inicio de sesión</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Ingresa tu Correo</h4>
<p>Proporciona la dirección de correo electrónico asociada con tu cuenta</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Revisa tu Correo</h4>
<p>Busca un enlace para restablecer la contraseña en tu bandeja de entrada</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Crea una Nueva Contraseña</h4>
<p>Sigue el enlace y establece una nueva contraseña segura</p>
</div>
</div>
</div>
<div class="helpful-section">
<span>¿Fue esto útil?</span>
<div class="helpful-buttons">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Sí
</button>
<button class="helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
No
</button>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="card-meta">
<span class="last-updated">Actualizado 18 Ene, 2024</span>
<span class="popularity">👍 31</span>
</div>
<button class="expand-btn" aria-expanded="false">
<span class="expand-text">Leer Más</span>
<svg class="expand-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
</div>
<!-- Tarjeta FAQ 4 -->
<div class="faq-card" data-category="support" data-keywords="contacto soporte ayuda servicio cliente">
<div class="card-header">
<div class="category-badge support">
<span class="badge-icon">🎧</span>
<span>Soporte</span>
</div>
<div class="card-actions">
<button class="bookmark-btn" aria-label="Marcar esta pregunta">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</button>
</div>
</div>
<div class="card-content">
<h3 class="question-title">¿Cómo puedo contactar al soporte al cliente?</h3>
<div class="question-preview">
¡Estamos aquí para ayudar! Contacta a nuestro equipo de soporte a través de múltiples canales...
</div>
<div class="answer-content" style="display: none;">
<p>¡Estamos aquí para ayudar! Contacta a nuestro equipo de soporte a través de múltiples canales:</p>
<div class="contact-options">
<div class="contact-option">
<div class="contact-icon">📧</div>
<div class="contact-details">
<h4>Soporte por Correo</h4>
<p>soporte@ejemplo.com</p>
<span>Respuesta en 24 horas</span>
</div>
</div>
<div class="contact-option">
<div class="contact-icon">💬</div>
<div class="contact-details">
<h4>Chat en Vivo</h4>
<p>Disponible en nuestro sitio web</p>
<span>Lun-Vie 9AM-6PM EST</span>
</div>
</div>
<div class="contact-option">
<div class="contact-icon">📞</div>
<div class="contact-details">
<h4>Soporte Telefónico</h4>
<p>1-800-123-4567</p>
<span>Lun-Vie 9AM-6PM EST</span>
</div>
</div>
</div>
<div class="helpful-section">
<span>¿Fue esto útil?</span>
<div class="helpful-buttons">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Sí
</button>
<button class="helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
No
</button>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="card-meta">
<span class="last-updated">Actualizado 12 Ene, 2024</span>
<span class="popularity">👍 15</span>
</div>
<button class="expand-btn" aria-expanded="false">
<span class="expand-text">Leer Más</span>
<svg class="expand-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
</div>
</div>
<!-- Mensaje Sin Resultados -->
<div class="no-results" style="display: none;">
<div class="no-results-icon">🔍</div>
<h3>No se encontraron resultados</h3>
<p>Intenta ajustar tus términos de búsqueda o navega por todas las preguntas arriba.</p>
</div>
<!-- Botón Cargar Más -->
<div class="load-more-container" style="display: none;">
<button class="load-more-btn">
<span>Cargar Más Preguntas</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Estilos CSS
/* Los estilos CSS son los mismos que en la versión en inglés */Funcionalidad JavaScript
/* El JavaScript es el mismo que en la versión en inglés */Instrucciones de Uso
- Configuración Básica: Incluye los archivos HTML, CSS y JavaScript en tu proyecto
- Búsqueda: Escribe en el cuadro de búsqueda para filtrar elementos FAQ en tiempo real
- Filtrar por Categoría: Haz clic en los botones de categoría para mostrar solo tipos específicos de preguntas
- Cambiar Vista: Alterna entre vistas de cuadrícula y lista usando los botones de vista
- Ordenar Resultados: Usa el menú desplegable de ordenar para organizar preguntas por relevancia, fecha, popularidad o alfabéticamente
- Expandir Preguntas: Haz clic en “Leer Más” para ver respuestas completas
- Marcar: Haz clic en el ícono de marcador para guardar preguntas para más tarde
- Votar: Usa los botones útil/no útil para calificar respuestas
Opciones de Personalización
- Categorías: Modifica los atributos
data-categoryy botones de filtro para que coincidan con tu contenido - Palabras Clave: Agrega palabras clave relevantes a
data-keywordspara mejores resultados de búsqueda - Estilo: Personaliza colores, fuentes y animaciones en el CSS
- Análisis: Implementa seguimiento real en los métodos
trackExpansionytrackHelpfulVote - Cargar Más: Agrega funcionalidad de paginación o desplazamiento infinito
- Iconos: Reemplaza iconos emoji con iconos SVG personalizados o fuentes de iconos
Soporte de Navegadores
- Navegadores Modernos: Funcionalidad completa en Chrome, Firefox, Safari, Edge
- Responsivo: Funciona en escritorio, tablet y dispositivos móviles
- Accesibilidad: Navegación completa por teclado y soporte para lectores de pantalla
- Rendimiento: Optimizado para animaciones suaves y filtrado rápido
Características de Rendimiento
- Búsqueda Debounced: Previene filtrado excesivo durante la escritura
- Actualizaciones DOM Eficientes: Minimiza reflujos y repintados
- Almacenamiento Local: Persiste marcadores entre sesiones
- Animaciones Suaves: Transiciones CSS para mejor experiencia de usuario
HTML
1
líneas
CSS
1
líneas
JavaScript
1
líneas
<!-- HTML content will be added here -->