Live Demos Demo Websites
Explore complete, production-ready government website examples. Each demo showcases real-world use cases with accessibility features, responsive design, and federal compliance built in.
View Agency Homepage Browse All DemosExperience fully functional government website examples built with this template
Try it yourself: All demo sites are fully interactive. Click buttons, fill forms, and explore navigation to see how everything works together.
Featured Demo Sites
Federal Agency Homepage
A complete agency website with all the essential elements: hero sections, service highlights, news updates, and citizen engagement tools. Perfect starting point for any government agency website.
Services Portal
Comprehensive citizen services directory with categories, detailed service information, and application processes. Shows how to organize and present multiple services effectively.
- ✓ Service categorization
- ✓ Accordion navigation
- ✓ Process workflows
- ✓ Fee structures
Data Dashboard
Performance metrics and transparency reporting dashboard with KPIs, data tables, and visualizations. Perfect for agencies needing to display operational data.
- ✓ Key performance indicators
- ✓ Data tables & charts
- ✓ Regional comparisons
- ✓ Accessibility metrics
Forms Showcase
Comprehensive collection of accessible form patterns including validation, multi-step processes, and complex inputs. Essential reference for any data collection needs.
- ✓ All input types
- ✓ Form validation
- ✓ Multi-select menus
- ✓ Accessibility features
News & Updates
News hub layout with press releases, announcements, and public notices. Shows best practices for content organization and article presentation.
- ✓ Article cards
- ✓ Category tags
- ✓ Date formatting
- ✓ Archive structure
What Each Demo Includes
Full Accessibility
Every demo meets WCAG 2.1 AA standards with proper ARIA labels, keyboard navigation, and screen reader support.
Responsive Design
All demos work perfectly on mobile, tablet, and desktop devices with touch-friendly interfaces.
Clean Code
Well-commented source code available for every demo page. Copy, paste, and customize for your needs.
How to Use These Demos
-
Explore the Live Demos
Click through each demo to experience the user interface and interactions. Try different screen sizes and test with keyboard navigation.
-
View the Source Code
Find the corresponding
.mdfiles insrc/pages/demo/directory. Each file contains the complete page structure and content. -
Copy and Customize
Use any demo as a starting point. Replace the placeholder content with your agency's information while keeping the structure intact.
-
Test and Deploy
Run accessibility tests, verify responsive behavior, and deploy your customized version to production.
Quick Reference
| Demo Site | Best For | Key Components | View |
|---|---|---|---|
| Agency Homepage | Main agency websites | Hero, cards, news, stats | View → |
| Services Portal | Service directories | Categories, accordions, process lists | View → |
| Data Dashboard | Performance reporting | KPIs, tables, charts, metrics | View → |
| Forms Showcase | Data collection | All input types, validation | View → |
| News & Updates | Communications | Articles, tags, dates | View → |