Product Strategy
Layouts
Enterprise-grade layout patterns for dashboards, landing pages, and complex interfaces.
Hero Sections
Large, prominent sections for landing pages and main messaging with clear calls-to-action.
Centered Hero with Gradient
New Release
Build Better Applications Faster
A production-ready ASP.NET Core template with enterprise-grade components and zero framework dependencies.
Compact Left-Aligned Hero
Featured
Enterprise UI Starter Kit
Everything you need to build professional web applications with ASP.NET Core.
Stats & Metrics Cards
KPI displays for dashboards and analytics with trend indicators and visual enhancements.
Basic Stats Cards
Total Revenue
£124,592
vs. last month
Active Users
8,432
vs. last week
Conversion Rate
3.24%
vs. last month
Stats Card with Progress
Storage Used
78.5 GB
of 100 GB
Accent & Filled Variants
Uptime
99.9%
Last 30 days
Total Projects
156
24 active
Team Members
42
+3 this month
Pricing Tables
Plan comparison tables for subscriptions and feature matrices.
Three-Tier Pricing
Starter
Perfect for individuals and small projects
- Up to 10 projects
- 5 GB storage
- Email support
- Advanced analytics
- Priority support
Professional
For growing teams and businesses
- Unlimited projects
- 50 GB storage
- Priority email support
- Advanced analytics
- Dedicated account manager
Enterprise
For large organizations
- Unlimited everything
- 500 GB storage
- 24/7 phone & email support
- Advanced analytics & reporting
- Dedicated account manager
Accordion / Collapsible Sections
Expandable content sections for FAQs, settings, and information hierarchies.
Basic Accordion
The template includes 50+ production-ready components, comprehensive documentation, accessibility features, and a complete design system built with vanilla CSS and JavaScript.
Edit the --brand-core variable in base.css. All other colors derive automatically using color-mix() for both light and dark modes.
Yes! All components follow WCAG 2.2 Level AA guidelines with proper ARIA attributes, keyboard navigation, focus management, and contrast ratios.
Bordered Accordion
This is a bordered accordion variant suitable for settings panels and configuration interfaces.
Configure security and authentication settings for your account.
Media Object Layout
Flexible image + content patterns for lists, comments, and feature displays.
User List with Avatars
Sarah Johnson
Product Manager
Michael Chen
Senior Developer
Feature Layout
Advanced Scheduling
Schedule reports, exports, and automated tasks with flexible recurring patterns. Set up daily, weekly, monthly, or custom schedules to automate your workflows.
Split Pane / Resizable Layout
Drag-to-resize layouts for side-by-side content with collapsible panels.
Vertical Split with Resizer
💾 The split pane size is automatically saved and restored on page reload.
Sidebar Content
This panel can be resized by dragging the divider. Try it!
- Navigation items
- Filters and controls
- Collapsible sections
Main Content
The main content area adjusts automatically as you resize the sidebar. This pattern is perfect for:
- Code editors with file explorers
- Email clients with message lists
- Document viewers with navigation
- Admin interfaces with settings panels
The resizer supports both mouse drag and keyboard navigation (arrow keys).
Horizontal Split with Resizer
💾 The split pane size is automatically saved and restored on page reload.
Header Panel
Drag the horizontal divider to resize the top and bottom panels.
Content Panel
This horizontal split pattern is ideal for:
- Terminal windows with output panes
- Editor with preview below
- Chat interfaces with message list above
- Dashboard with header and scrollable content
Both vertical and horizontal resizers support keyboard navigation and state persistence.
Dashboard Grid Layout
Responsive grid for dashboard widgets with flexible sizing, spanning, and drag-to-reorder functionality.
Dashboard Widget Grid with Drag & Drop
💡 Click "Enable Drag & Drop", then drag the handle icon (☰) on each widget to reorder. Use "Save Layout" to persist your arrangement. Navigate away from the page and return, then click "Load Layout" to restore your saved arrangement.