Partnership Block Component
Expandable partnership block component for "How Festa Works" page. Features Alpine.js accordion functionality, color-coded visual indicators, and trauma-informed UX.
📋 Component Specifications
Props
title- Partnership category titleheadline- Descriptive headlinedescription- Main description textbenefits- Array of benefit itemscolor- Color theme (pepper-green, leaf, apocalyptic-orange)icon- Icon identifier (optional)expanded- Initial expanded state (default: false)
Features
- ✓ Alpine.js accordion with smooth collapse animation
- ✓ Keyboard accessible (Enter/Space to toggle)
- ✓ ARIA labels for screen readers
- ✓ Color-coded visual indicators
- ✓ Responsive mobile/desktop layouts
- ✓ Trauma-informed interaction patterns
- ✓ Slot support for nested FAQ content
Version 1: Default Expandable Block
Clean, professional design with expandable details section. Icon-based visual indicator.
Build Your Team's Design Capacity
Not every organization needs a full design overhaul—sometimes you need the knowledge and tools to do it yourself. Through our "Setup Your Project for Success" design series, we democratize access to professional design strategies by teaching nonprofits, NGOs, and social impact startups essential techniques for creating high-level project plans.
What You'll Gain:
- Practical design frameworks you can apply immediately
- Confidence to plan and execute visual communications independently
- Skills that grow with your organization
- Cost-effective foundation for future design work
We believe design literacy should be accessible to everyone working toward positive change. Our capacity-building approach empowers your team to make strategic design decisions, communicate more effectively, and maximize impact with the resources you have.
In-House Social Impact Projects
Sometimes the best way to drive change is to create it ourselves. Through our "Humanity for Good" initiative, Festa designs and implements in-house social impact projects that address urgent community needs.
What This Means for You:
- You partner with a studio that walks the walk
- We bring lessons from our own impact projects to your work
- You support an organization actively contributing to social good
- We understand implementation challenges because we live them
Projects like Zika Alert—our public health communication platform—demonstrate our commitment to using design as a direct tool for positive change. These initiatives allow us to experiment with innovative approaches, respond quickly to emerging challenges, and contribute directly to causes we care deeply about.
When we're not serving clients, we're serving communities. This work keeps us connected to the real-world impact of design and continuously strengthens our ability to serve purpose-driven organizations effectively.
Full Partnership for Co-Design and Implementation
Some challenges require a true partnership—where we work side-by-side with your team from strategy through implementation. Our "Collaboration for Good" model brings together nonprofit organizations and social impact startups in consortium arrangements for co-design, full project implementation, and comprehensive consulting services tailored to your specific needs.
What You'll Experience:
- Dedicated design partnership aligned with your timeline
- Co-creation that honors your expertise and incorporates our strategic guidance
- Comprehensive solutions from concept to implementation
- Flexible engagement models that adapt as your needs evolve
- Ongoing optimization and support after launch
This is our most integrated partnership approach. We become an extension of your team, deeply embedded in your mission and committed to your success. Whether you need end-to-end campaign development, organizational rebranding, strategic communication planning, or specialized design expertise for a complex initiative, we bring collaborative creativity and proven implementation experience.
From discovery workshops to final launch and beyond, we're with you every step of the way—adapting to your evolving needs and ensuring every deliverable drives measurable impact.
👥 Feedback Requested
- 1. Is the expandable interaction intuitive and trauma-informed?
- 2. Do the color-coded visual indicators help distinguish partnership types?
- 3. Is the benefits list format clear and scannable?
- 4. Should the component be expanded by default or collapsed?
- 5. Any accessibility concerns with keyboard navigation or screen readers?
- 6. Is the content hierarchy clear (title → headline → description → benefits)?