Components for maintaining consistent aspect ratios across responsive content.
+ + +Last clicked: {{ lastClicked }}
+ } +This component shows/hides content based on screen size. Resize your browser to see the effects.
+ + +
+ This is inline text with
+
Current viewport info: Resize your browser window to test different breakpoints.
+ + + +Test Instructions:
+
+ Here is some text with an
+
This card is centered with constrained width for better readability.
+ +Loading...
+A compelling hero message that's perfectly centered and constrained for optimal reading.
+ +{{ sampleText }}
+{{ shortText }}
+{{ mediumText }}
+{{ variableText }}
+Resize your browser to see responsive column behavior
+{{ sampleText }}
+{{ shortText }}
+{{ mediumText }}
+{{ variableText }}
+{{ longText }}
+{{ mediumText }}
+{{ shortText }}
+{{ sampleText }}
+{{ mediumText }}
+{{ shortText }}
+📢 Welcome to {{ variant }} variant!
+This is the main content area for {{ variant }} dashboard variant.
+Sidebar: {{ config.sidebarWidth }}, Header: {{ config.headerHeight }}, Footer: {{ config.footerVariant }}
+Dashboard without footer for cleaner appearance.
+Streamlined dashboard without breadcrumbs and notifications.
+Current configuration:
+📈 Welcome to your dashboard overview. Here you can see key metrics and quick actions.
+📊 Analytics and reporting section. View detailed insights about your application usage.
+👥 User management section. Manage user accounts, permissions, and profiles.
+💼 Project management section. Track and manage your ongoing projects.
+⚙️ Application settings and configuration options.
+Select a section from the sidebar to view its content.
+ } + } +slot="header" - Header title and brandingslot="header-actions" - Theme switcher, notifications, user menuslot="sidebar" - Main navigation contentslot="breadcrumbs" - Breadcrumb navigationslot="notifications" - System notifications and alertsslot="footer" - Footer content and links{{ item.content }}
+{{ item.content }}
+Be the first to share something!
+ +{{ item.content }}
+No content available
+This card is perfectly centered using flexbox.
+{{ card.content }}
+This is the main content area that grows to fill the available space.
++ Advanced CSS Grid wrapper with template areas support, responsive column/row definitions, and auto-placement algorithms. +
+ + +Small grid widget
-Analytics data
-Metrics overview
-Main highlight content
-Data insights
-Performance data
-Generated reports
-Responsive: mobile 12, tablet 6, desktop 6
-Quarter width
-Quarter width
-One third width
-Two thirds width
-{{ item.description }}
-This content area is larger than the container, so it will show custom scrollbars.
-You can scroll both horizontally and vertically to see all the content.
-<ui-dashboard-shell-layout
- [sidebarCollapsed]="collapsed"
- [showFooter]="true">
- <div slot="header">Header Content</div>
- <nav slot="sidebar">Navigation</nav>
- <div slot="main">Main Content</div>
- <div slot="footer">Footer Content</div>
-</ui-dashboard-shell-layout><ui-widget-grid-layout
- gridSize="md"
- [autoFit]="true">
- <ui-widget-container>
- <div>Widget Content</div>
- </ui-widget-container>
-</ui-widget-grid-layout><ui-bento-grid-layout
- variant="balanced"
- [adaptive]="true">
- <div>Grid Item 1</div>
- <div>Grid Item 2</div>
- <div>Grid Item 3</div>
-</ui-bento-grid-layout><ui-list-detail-layout>
- <div slot="list">
- List of items
- </div>
- <div slot="detail">
- Selected item details
- </div>
-</ui-list-detail-layout>Master-detail pattern with resizable panes and mobile-adaptive behavior
+ + +{{ item.subtitle }}
+ + {{ item.status }} + +{{ selectedItems[size].description }}
+Choose an item from the list to view its details
+{{ item.subtitle }}
+{{ selectedItems[variant].description }}
+{{ item.subtitle }}
+ + {{ item.status }} + +{{ selectedItems['interactive'].description }}
+Select any item to see the interactive features in action
+{{ i + 1 }}. {{ item }}
+ } +Scroll events: Top reached {{ topCount }} times, Bottom reached {{ bottomCount }} times
+{{ i + 1 }}. {{ item }}
+ } +| {{ row.id }} | +{{ row.name }} | +{{ row.description }} | +{{ row.value }} | +{{ row.status }} | +
{{ i + 1 }}. {{ item }}
+ } +Virtual scrolling with {{ largeDataset.length }} items (only visible items are rendered)
+{{ i + 1 }}. {{ item }}
+ } +Scroll position is saved and restored automatically (uses sessionStorage)
+{{ i + 1 }}. {{ item }}
+ } +Current scroll position: {{ currentScrollPosition.top }}px (top), {{ currentScrollPosition.left }}px (left)
+Is scrolling: {{ isScrolling ? 'Yes' : 'No' }}
+{{ item.content }}
+This section demonstrates the {{ spacing }} spacing variant with consistent vertical padding.
+This section demonstrates the {{ background }} background variant.
+This section content is aligned to the {{ align }}.
+This section is contained with max-width and centered margins.
+This section spans the full width of its container without constraints.
+This section includes proper ARIA labeling for screen readers.
+This is a hero section with extra large spacing and centered content.
+ +This is a standard content section with large spacing and transparent background.
+This footer section spans full width with contained inner content.
+The HStack below converts to a VStack on small screens:
+A layout component with main content and a collapsible supporting pane for additional information, tools, or navigation.
+ + +This is the primary content area where your main application content would be displayed.
+Key metrics and performance indicators would be shown here.
+A list of recently accessed or modified documents.
+Content area with supporting pane on the left side.
+Recent messages and communications.
+The supporting pane width changes based on the selected size variant.
+Pane size: {{ selectedSize }}
+Different visual styles for the supporting pane.
+Current variant: {{ selectedVariant }}
+This demonstrates the {{ selectedVariant }} visual styling.
+This demo shows various configuration options:
+This is example content to demonstrate scrolling behavior when sticky pane is enabled.
+Close tabs by clicking the × button. Some tabs cannot be closed.
+Use scroll controls when tabs overflow the container width.
+Drag tabs to reorder them. Order changes: {{ reorderCount() }}
+Lazy tabs only load content when first selected.
+Disabled tabs cannot be selected or interacted with.
+Current tab: {{ activeTab() || 'None' }}
+Tab selections: {{ tabSelectCount() }}
+