FAQ Accordion Component
Accessible FAQ accordion component for partnership model FAQs. Features Alpine.js smooth transitions, keyboard navigation, ARIA labels, and trauma-informed UX patterns.
📋 Component Specifications
Props
questions- Array of FAQ objectscolor- Color theme (pepper-green, leaf, apocalyptic-orange)title- Section title (optional)allowMultiple- Allow multiple open items (default: false)
Features
- ✓ Alpine.js accordion with smooth transitions
- ✓ Keyboard accessible (Enter/Space, Tab navigation)
- ✓ ARIA attributes for screen readers
- ✓ Single or multiple expansion modes
- ✓ Color-coded visual indicators
- ✓ Responsive mobile/desktop layouts
- ✓ WCAG 2.2 AA compliant
Version 1: Design for Good FAQs (Pepper Green)
FAQ accordion with pepper-green color theme for capacity building questions.
Frequently Asked Questions
About building your team's design capacity
Not at all. Our educational series is specifically designed for mission-driven professionals without formal design training. We use plain language, practical examples from the nonprofit sector, and hands-on exercises that meet you where you are. You'll leave with skills you can apply right away—no design degree required.
By learning core design strategies, your team can handle smaller projects in-house and make better decisions when you do hire external help. This means your budget goes further, you maintain creative control, and you're never dependent on expensive agencies for every communication need. Think of it as an investment that pays dividends across every future project.
The series is designed for busy nonprofit professionals. Sessions are flexible and can be adapted to your schedule, typically delivered over several weeks with minimal time commitment. The skills you gain will actually streamline your current work by helping you make faster, more confident design decisions.
We're here for you. Many nonprofits start with capacity building and later engage us for specific projects or consulting as their needs evolve. You'll also gain access to our resource library and community of practice, where you can continue learning and get occasional guidance.
Our approach is tailored specifically to purpose-driven organizations facing real-world constraints—limited budgets, small teams, and the need to communicate complex social issues. We focus on strategic design thinking for impact, not just technical skills. Plus, we understand the nonprofit sector's unique challenges because we work in this space every day.
Version 2: Humanity for Good FAQs (Leaf Green)
FAQ accordion with leaf-green color theme for in-house projects questions.
Frequently Asked Questions
About our in-house social impact projects
Our in-house projects make us better partners for you. By designing and implementing our own social impact initiatives, we stay deeply connected to the challenges you face—tight timelines, resource constraints, and the need for measurable impact. The lessons we learn solving real-world problems directly inform the solutions we create for clients.
No. We structure our capacity carefully to ensure client work always receives our full attention. In-house projects often happen during slower periods or through dedicated team members. Think of them as our research and development—they sharpen our skills and keep our approach fresh, which ultimately benefits you.
Absolutely. Many of our in-house projects started as explorations that later became client collaboration models. If you see an approach in our "Humanity for Good" portfolio that resonates with your mission, let's talk about adapting it to your specific needs and context.
We align our in-house work with the UN Sustainable Development Goals and respond to urgent community needs where design can make an immediate difference. We also listen to the communities we serve and prioritize projects that address gaps in existing resources.
We'd love that. Some of our best in-house projects have evolved through partnerships with mission-aligned organizations. If your cause intersects with one of our initiatives, there may be opportunities for collaboration, co-branding, or joint implementation. Reach out and let's explore possibilities.
Version 3: Collaboration for Good FAQs (Apocalyptic Orange)
FAQ accordion with apocalyptic-orange color theme for full partnership questions.
Frequently Asked Questions
About full partnership and co-design
Traditional agencies often work at arm's length—you brief them, they create, you approve. We embed ourselves in your mission as true partners. We participate in your strategic planning, attend your team meetings, and think long-term about your organizational goals, not just individual deliverables. You get our commitment to your cause, not just our creative services.
That's exactly what "Collaboration for Good" is designed for. We don't believe in one-size-fits-all solutions. Whether you need help with a unique campaign format, a specialized communication challenge, or an innovative project that doesn't fit traditional categories, we'll build a partnership model that addresses your exact needs.
As involved as you want to be. Some clients prefer intensive collaboration with frequent workshops and feedback sessions. Others need us to take more of a lead while they focus on their core programs. We'll discuss your capacity and preferences upfront and design a collaboration rhythm that works for your team.
We build transparency into every partnership through clear project documentation, regular check-ins on budget and timeline, and collaborative project management tools you can access anytime. You'll never wonder where things stand. We also address potential roadblocks proactively and adjust together rather than letting issues escalate.
Launch isn't the end—it's the beginning of your solution's impact. We include post-launch support in every collaboration package, typically covering optimization, troubleshooting, and performance assessment. Many partnerships evolve into long-term relationships where we provide ongoing consulting as your organization grows. We're invested in your sustained success, not just project completion.
Implementation Notes
Accessibility Features
- ✓ Keyboard Navigation: Full Tab, Enter, Space support
- ✓ ARIA Attributes: aria-expanded, aria-controls on all buttons
- ✓ Focus Indicators: Visible focus rings on interactive elements
- ✓ Color Contrast: WCAG 2.2 AA compliant text and background combinations
- ✓ Screen Reader Support: Descriptive labels and state changes
Trauma-Informed Design
- ✓ Predictable Interactions: Consistent accordion behavior across all instances
- ✓ Visual Feedback: Border color change indicates active state
- ✓ Controlled Pacing: User controls when to expand/collapse content
- ✓ Clear Hierarchy: Question numbers and visual separators
- ✓ Smooth Transitions: Gentle animations reduce cognitive load
Technical Implementation
- ✓ Alpine.js x-collapse: Custom collapse directive for smooth height animations
- ✓ State Management: Single open item at a time (accordion pattern)
- ✓ Color Theming: Easily customizable via color prop (pepper-green, leaf, apocalyptic-orange)
- ✓ Responsive Design: Mobile-first approach with flex layouts
- ✓ Performance: Minimal JavaScript, CSS transitions only