interactive
intermediate
faq
grid
cards
filter
responsive
interactivo
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
—
Compatibilidad del Navegador
No
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">
<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>
<div class="faq-controls">
<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>
<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>
<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>
<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>
<div class="faq-grid" data-view="grid">
<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>
<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>
<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>
<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>
<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>
<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
Funcionalidad JavaScript
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