Design System Sandbox
Explore all Festa Design System components organized by atomic design principles. Search, filter, and navigate to interactive examples of atoms, narratives, interfaces, and full-page templates.
Filter by Category
Showing 32 of 32 components
Brand Assets & Logo
Complete logo usage guide with specifications, sizing, spacing, and accessibility guidelines
Gradient Guidelines
Complete gradient system with accessibility guidelines and WCAG compliance
Typography Formatted
Typography scale, hierarchy, and formatting examples with accessibility
Partnership Decision Tree
4 Mermaid diagram variations for "Three Ways We Partner for Impact" with Festa calm colors optimized for gradient backgrounds
Hero with Diagram
Hero section with integrated Mermaid decision tree diagram for How Festa Works page featuring 4 responsive layout variations and trauma-informed UX
Partnership Block
Expandable partnership block with Alpine.js accordion, color-coded indicators, and trauma-informed UX for How Festa Works page
FAQ Accordion
Accessible FAQ accordion component for partnership model FAQs with Alpine.js smooth transitions, keyboard navigation, ARIA labels, and trauma-informed UX patterns
Button
Button component variants with multiple states and sizes
Input
Form input component with validation and error states
Tag
Tag and badge component for labels and categories
Navigation
Navigation patterns and menu components
Cards
Versatile card patterns for blog posts and content
Newsletter Forms
Accessible newsletter signup forms with validation
Heroes
Hero section variants for landing pages
Home Hero Variations
4 home hero variations with complex SVG animations, trauma-informed UX, and WCAG 2.2 AA compliance
Blog Content Variations
4 blog content body typography styles: Standard Article, Technical Documentation, Legal/Policy, and Editorial content with comprehensive formatting examples
Work Section
4 hero split-screen work section layouts: Default, Reversed, Centered, and Minimal design variations for home page featured case study display
Insights Section
4 hero split-screen insights/blog section layouts: Default, Reversed, Centered, and Minimal design variations for home page featured blog post display
Features
Feature section layouts and grid patterns
Testimonials
Testimonial display patterns and social proof
CTAs
Call-to-action sections for conversion
SDG Section
4 UN Sustainable Development Goals section variations with trauma-informed design and WCAG 2.2 AA compliance
Homepage
Complete homepage template composition
Services
Services page template with features
Portfolio Grid
Portfolio grid template for case studies
Blog Archive
Blog archive template with card grid
Blog Single
Single blog post template with article layout
Case Study
Case study template for portfolio projects
About
About page template with team sections
Contact
Contact page template with form
Contract Password
Password-protected contract access page
Contract View
Contract document view with print functionality
How to Use the Sandbox
Search & Filter
Use the search bar to find components by name, description, or tags. Filter by category to narrow results.
Interactive Preview
Click any component card to view interactive examples with live code previews and usage guidelines.
Copy Code
Each component page includes copy-ready Blade and HTML code examples for easy implementation.