Neumorphic FAQ Cards Component

A modern FAQ component with neumorphic design, soft shadows, and interactive cards that create a tactile, extruded appearance.

Features

• Neumorphic Design: Soft UI design with subtle shadows that create an extruded effect
• Card-based Layout: Grid layout with individual cards for each FAQ item
• Smooth Animations: Elegant transitions when expanding/collapsing answers
• Responsive Grid: Automatically adjusts to different screen sizes
• Interactive Elements: Cards respond to user interaction with hover effects
• Customizable: Easy to customize with CSS variables

HTML Structure

<div class="neumorphic-faq-container">
  <div class="faq-header">
    <h2 class="faq-title">Frequently Asked Questions</h2>
    <p class="faq-subtitle">Explore our knowledge base</p>
  </div>
  
  <div class="faq-grid">
    <div class="faq-card">
      <div class="card-question">
        <h3>What is neumorphism design?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>Neumorphism is a UI design trend that creates elements appearing to extrude from the background, using subtle shadows.</p>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-question">
        <h3>How does this FAQ work?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>Simply click on any question to expand and view the detailed answer. The cards have smooth transitions.</p>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-question">
        <h3>Is it mobile-friendly?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>Absolutely! This design is fully responsive and works beautifully on all device sizes.</p>
      </div>
    </div>
    
    <div class="faq-card">
      <div class="card-question">
        <h3>Can I customize it?</h3>
        <div class="card-icon">+</div>
      </div>
      <div class="card-answer">
        <p>Yes, the design is easily customizable with CSS variables for colors, shadows, and spacing.</p>
      </div>
    </div>
  </div>
</div>

CSS Styles

.neumorphic-faq-container {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
  background: #e0e5ec;
  min-height: 100vh;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.faq-subtitle {
  color: #6b7280;
  font-size: 1.1rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.faq-card {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 8px 8px 16px #b8bec6, -8px -8px 16px #ffffff;
  transition: all 0.3s ease;
  cursor: pointer;
}

.faq-card:hover {
  box-shadow: 6px 6px 12px #b8bec6, -6px -6px 12px #ffffff;
  transform: translateY(-5px);
}

.faq-card.active {
  box-shadow: inset 6px 6px 12px #b8bec6, inset -6px -6px 12px #ffffff;
}

.card-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.card-question h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
  font-weight: 600;
}

.card-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e0e5ec;
  box-shadow: inset 2px 2px 4px #b8bec6, inset -2px -2px 4px #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.faq-card.active .card-icon {
  transform: rotate(45deg);
  background: #d1d8e0;
}

.card-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-card.active .card-answer {
  max-height: 200px;
  padding-top: 1rem;
}

.card-answer p {
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .neumorphic-faq-container {
    padding: 1rem;
  }
  
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .faq-title {
    font-size: 2rem;
  }
}

JavaScript Functionality

document.addEventListener('DOMContentLoaded', function() {
  const faqCards = document.querySelectorAll('.faq-card');
  
  faqCards.forEach(card => {
    const question = card.querySelector('.card-question');
    
    question.addEventListener('click', () => {
      const isActive = card.classList.contains('active');
      
      // Close all other cards
      faqCards.forEach(otherCard => {
        if (otherCard !== card) {
          otherCard.classList.remove('active');
        }
      });
      
      // Toggle current card
      if (isActive) {
        card.classList.remove('active');
      } else {
        card.classList.add('active');
      }
    });
  });
});

Implementation Guide

1. Copy the HTML structure into your project
2. Add the CSS styles to your stylesheet
3. Include the JavaScript code in your script file
4. Customize the colors and shadows to match your design system
5. Add your own FAQ content

The neumorphic FAQ cards feature a soft UI design with subtle shadows that create an extruded effect, giving the interface a tactile, three-dimensional appearance. The grid layout automatically adjusts to different screen sizes, ensuring a great experience on both desktop and mobile devices.