Festa Design Studio Design System
← Back to Dashboard

Card Components

Flexible card patterns for blog posts, case studies, services, and team members. Fully responsive and accessible.

Blog Post Cards

Blog article cards with category badges, author information, and read time estimates.

Article Image
UX Design
5 min read • Oct 26, 2025

Trauma-Informed UX: Design with Empathy

Learn how trauma-informed design principles create safer, more supportive user experiences for everyone.

AO

Abayomi Ogundipe

Design Lead

Article Image
Strategy
8 min read • Oct 20, 2025

Activity Design: From Logframes to Impact

A comprehensive guide to activity design methodology for social impact projects and programs.

AO

Abayomi Ogundipe

Design Lead

Article Image
Design Tips
6 min read • Oct 15, 2025

Building Accessible Color Systems

Essential guidelines for creating color palettes that meet WCAG standards and enhance usability for all users.

AO

Abayomi Ogundipe

Design Lead

Featured Blog Post Card

Large horizontal card for prominently featuring a single blog article. Perfect for hero sections or featured content areas.

Featured Card Guidelines

When to Use

  • Hero section on blog index page
  • Highlighting a single priority article
  • Promotional content or announcements
  • Time-sensitive featured content

Best Practices

  • Use only ONE featured card per page
  • Ensure featured image is high quality (16:9 or 4:3 ratio)
  • Keep excerpt between 150-200 characters
  • Update featured content regularly (weekly/monthly)

Case Study Cards

Clean case study cards with featured images, SDG badges, sector tags, and service categories.

Project Image

NARA Youth Empowerment

Project Design
SDG 4: Quality Education SDG 4 SDG 10: Reduced Inequalities SDG 10
Nonprofit Youth Programs

Design Thinking Program for At-Risk Youth

Empowering at-risk youth through design thinking methodology and trauma-informed frameworks to build resilience and creative problem-solving skills.

View project
Project Image

Zika Crisis Response

Communication Design
SDG 3: Good Health and Well-being SDG 3 SDG 17: Partnerships for the Goals SDG 17
Healthcare Public Health

Public Health Communication System

Crisis communication framework designed to deliver clear, accessible public health information during the Zika outbreak, emphasizing trust and transparency.

View project
Project Image

Dr. G's Lab

Project Design Campaign Design
SDG 3: Good Health and Well-being SDG 3 SDG 10: Reduced Inequalities SDG 10
Healthcare Technology

Digital Health Platform for Community Care

Community-centered digital health platform connecting patients with local healthcare resources, emphasizing accessibility and reducing health inequities.

View project
Project Image

SYFS Foster Care Support

Communication Design
SDG 3: Good Health and Well-being SDG 3 SDG 16: Peace, Justice and Strong Institutions SDG 16
Nonprofit Child Welfare

Trauma-Informed Support Network Design

Comprehensive support network for foster families built on trauma-informed principles, fostering safety, trust, and collaborative care for vulnerable children.

View project

Service Cards

Service offering cards with circular icon containers and clear calls-to-action.

Campaign Design

Design integrated campaigns that inspire action and create lasting social impact through strategic storytelling.

Learn how we design campaigns

Default Card System

Generic, reusable card patterns for any content type. Use these as a foundation for custom card designs.

Basic Card with Border

Simple card pattern with border, rounded corners, and icon. Perfect for feature highlights or informational content.

Learn more

Card with Gradient

Subtle gradient background adds visual warmth. Ideal for cards requiring emphasis or trauma-informed UX.

Learn more
Card Image

Card with Featured Image

Standard card with featured image. Use for content-rich cards like articles, projects, or media galleries.

Learn more

Default Card System Guidelines

When to Use

  • Feature highlights and product showcases
  • Informational content blocks
  • Grid layouts requiring visual consistency
  • Custom content types not covered by specialized cards

Design Principles

  • Use rounded-2xl for softer, trauma-informed corners
  • Maintain consistent padding (p-6) for content areas
  • Apply subtle gradients for visual warmth when appropriate
  • Ensure proper contrast ratios (WCAG 2.2 AA: 4.5:1 minimum)

Accessibility Guidelines

Semantic HTML

  • Use <article> for blog posts and case studies
  • Proper heading hierarchy (<h3> for card titles)
  • Meaningful link text ("Read more about [title]")
  • Image alt text for featured images

Interactive Elements

  • Keyboard accessible links and buttons
  • Focus visible indicators on hover
  • Hover effects don't rely on color alone
  • Touch targets minimum 44x44px