Page Templates
Production-ready, copy-paste page templates built entirely with Focus UI components. No custom CSS required.
About These Templates
Each template is fully functional and responsive, using only Focus UI classes and components. Simply copy the HTML, customize the content, and you're ready to go. All templates are mobile-first and adapt beautifully to any screen size.
Available Templates
Dashboard Layout
A complete dashboard with fixed sidebar navigation, top navbar with user menu, and responsive card-based content area. Perfect for admin panels and data-heavy applications.
Landing Page
A modern landing page with hero section, features grid, call-to-action, and footer. Perfect for product launches and marketing sites.
Admin Panel
A complete admin panel with sidebar navigation, top bar with search and user menu, and data tables. Ideal for backend management systems.
Login Page
A modern login page with centered card, form validation, social login buttons, and remember me option. Perfect for authentication pages.
Blog Layout
A complete blog layout with header, two-column layout (main content and sidebar), article cards, and footer. Ideal for blogs and content-heavy sites.
Customization Tips
Colors
All templates use Focus UI's color system. Change colors by modifying CSS variables or using different color classes like .focus-btn-success, .focus-badge-warning, etc.
Responsive
All templates are mobile-first. Test on different screen sizes and adjust breakpoint classes (.focus-col-md-*, .focus-col-lg-*) as needed.
Components
Mix and match components from the Focus UI library. Replace cards with different variants, swap button styles, or add more interactive elements.
No Custom CSS
These templates use only Focus UI classes. You can add custom CSS for specific needs, but most styling can be done with utility classes.