Festa Design Studio Design System
← Back to Dashboard

Insights Section Variations

Four hero split-screen layouts showcasing featured blog posts on the home page. Each variation emphasizes different content hierarchies and visual flows while maintaining accessibility and trauma-informed design principles.

Default design: Content left, featured blog card right, with calm leaf-to-gold gradient background.

Reversed layout: Featured blog card left, content right. Same gradient, different visual flow and reading pattern.

Centered layout: Full-width content header at top, featured card below and centered for maximum prominence.

Minimal design: Simplified content without eyebrow, clean two-tone gradient, focus on the featured content itself.

Latest Insights

Stay Informed on Design for Good

Explore our latest thoughts on accessible design, trauma-informed UX, and strategies for amplifying nonprofit impact through strategic design solutions.

Read All Insights
Building Accessible Digital Experiences for Nonprofits
Accessibility
AO
Abayomi Ogundipe
• • 8 min read

Building Accessible Digital Experiences for Nonprofits

Discover how implementing WCAG 2.2 Level AA standards can dramatically increase engagement and reach more diverse audiences in your nonprofit community.

WCAG Nonprofit
Building Accessible Digital Experiences for Nonprofits
Accessibility
AO
Abayomi Ogundipe
• • 8 min read

Building Accessible Digital Experiences for Nonprofits

Discover how implementing WCAG 2.2 Level AA standards can dramatically increase engagement and reach more diverse audiences in your nonprofit community.

WCAG Nonprofit
Latest Insights

Insights That Drive Impact

Discover how we partner with nonprofits and social enterprises to design digital experiences that amplify their mission and maximize community impact.

Explore Our Insights
Blog & Insights

Learn, Grow, and Amplify Your Impact

Our blog showcases insights on accessible design, trauma-informed UX, and strategies for purpose-driven organizations. Each post reflects our commitment to empowering nonprofits through thoughtful design.

Read All Insights
Building Accessible Digital Experiences for Nonprofits
Accessibility
AO
Abayomi Ogundipe
• • 8 min read

Building Accessible Digital Experiences for Nonprofits

Discover how implementing WCAG 2.2 Level AA standards can dramatically increase engagement and reach more diverse audiences in your nonprofit community. Learn practical strategies for creating inclusive digital experiences.

WCAG Accessibility Nonprofit Sector Digital Strategy

Latest Insights

Explore our latest thinking on accessible design, trauma-informed UX, and strategies for amplifying social impact.

View All Posts

Technical Specifications

Layout Options

  • Default: Content left, card right (primary design)
  • Reversed: Card left, content right (alternative flow)
  • Centered: Content top, card bottom (maximum prominence)
  • Minimal: Simplified content, clean aesthetic

Gradient Backgrounds

  • from-leaf-50 via-white-smoke-50 to-pot-of-gold-50
  • from-pot-of-gold-50 via-white-smoke-50 to-leaf-50
  • from-white-smoke-50 to-leaf-50

Responsive Behavior

  • ✅ Mobile: Stacks vertically (content → card)
  • ✅ Tablet: Two-column grid (md:grid-cols-2)
  • ✅ Desktop: Full split-screen layout
  • ✅ Maintains readability at all breakpoints

Accessibility Features

  • ✅ WCAG 2.2 Level AA compliant
  • ✅ Semantic HTML structure
  • ✅ Keyboard navigable
  • ✅ Screen reader friendly
  • ✅ High color contrast (4.5:1+)
  • ✅ Trauma-informed design (calm gradients, predictable)

Component Props (Future FDS Component)

Note: After approval, this will be converted to an FDS component at resources/views/components/fds/insights-section.blade.php and integrated into the home page.