Common layout patterns using Tailwind utilities with Interplanetary UI components.
Responsive card grids and arrangements using ip-panel containers.
Responsive 3-column grid that stacks on mobile.
Brief description of the card content goes here.
More content for the second card in the grid.
Content for the third card completes the row.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="ip-panel">
<div class="ip-panel-header">Category</div>
<div class="ip-panel-body">
<div class="ip-title">Card Title</div>
<p class="text-secondary mt-1">Description...</p>
<div class="flex gap-1 mt-2">
<span class="ip-tag">Tag</span>
<span class="ip-tag ip-tag-accent">Featured</span>
</div>
</div>
<div class="ip-panel-footer ip-action-group">
<a href="#" class="ip-action">View →</a>
</div>
</div>
<!-- More cards... -->
</div>Large featured card alongside a vertical stack.
This is the main featured content that takes up more space in the layout. It could be a highlighted article, announcement, or primary action area.
Brief description.
Brief description.
Brief description.
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="lg:col-span-2 ip-panel">
<div class="ip-panel-header">Featured</div>
<div class="ip-panel-body">
<div class="ip-title">Featured Article</div>
<p class="text-secondary mt-2">Main content...</p>
</div>
<div class="ip-panel-footer ip-action-group">
<a href="#" class="ip-action">Read More →</a>
</div>
</div>
<div class="flex flex-col gap-4">
<div class="ip-panel flex-1">...</div>
<div class="ip-panel flex-1">...</div>
<div class="ip-panel flex-1">...</div>
</div>
</div>Side-by-side layout that stacks on mobile.
This card layout places content side by side on larger screens and stacks vertically on mobile devices.
<div class="ip-panel">
<div class="ip-panel-body">
<div class="flex flex-col md:flex-row gap-4">
<div class="w-full md:w-48 h-24 bg-secondary/10">Image</div>
<div class="flex-1">
<div class="ip-title">Title</div>
<p class="text-secondary mt-1">Description...</p>
</div>
<div class="flex md:flex-col gap-2 shrink-0">
<button class="ip-btn">Action</button>
</div>
</div>
</div>
</div>Metrics, grids, and activity feeds for dashboard interfaces.
Key metrics in a responsive grid using ip-stat in ip-frame containers.
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="ip-frame">
<div class="ip-frame-header">Users</div>
<div class="ip-frame-body">
<div class="ip-stat">
<div class="ip-stat-value">12,847</div>
<div class="ip-stat-trend ip-stat-trend-up">↑ 12.5%</div>
</div>
</div>
</div>
<!-- More stats... -->
</div>Mixed-size panels for dashboard layouts.
| Name | Status | Value |
|---|---|---|
| Item A | Active | $1,234 |
| Item B | Pending | $567 |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="lg:col-span-2 ip-window">
<div class="ip-window-header">Chart Area</div>
<div class="ip-window-body">...</div>
</div>
<div class="ip-window">
<div class="ip-window-header">Quick Stats</div>
<div class="ip-window-body">...</div>
</div>
<div class="ip-window">...</div>
<div class="lg:col-span-2 ip-window">...</div>
</div>Scrollable list using ip-list-item with ip-scrollable.
<div class="ip-window ip-scrollable">
<div class="ip-window-header">Recent Activity</div>
<div class="ip-window-body max-h-48">
<div class="ip-list-item">
<div class="ip-list-item-icon">
<div class="ip-avatar ip-avatar-sm">JD</div>
</div>
<div class="ip-list-item-content">
<div class="ip-list-item-title">John Doe updated...</div>
<div class="ip-list-item-meta">2 minutes ago</div>
</div>
</div>
<!-- More items... -->
</div>
</div>Layouts for articles, posts, and data lists.
Article list with tags, metadata, and preview text.
Learn how to integrate the design system into your project with this comprehensive guide.
Major update with new components, improved theming, and better mobile support.
<article class="ip-panel">
<div class="ip-panel-body">
<div class="flex flex-col md:flex-row md:items-start gap-3">
<div class="flex-1">
<div class="flex flex-wrap gap-1 mb-2">
<span class="ip-tag ip-tag-accent">Tutorial</span>
<span class="ip-tag">CSS</span>
</div>
<h3 class="ip-title">Article Title</h3>
<p class="text-secondary mt-1">Preview text...</p>
<div class="text-secondary/50 text-xs mt-2">Jan 15, 2025 • 5 min</div>
</div>
<a href="#" class="ip-btn shrink-0">Read →</a>
</div>
</div>
</article>Structured list with actions and pagination.
<div class="ip-window">
<div class="ip-window-header">Documents</div>
<div class="ip-window-body">
<div class="ip-list-item">
<div class="ip-list-item-icon"><svg>...</svg></div>
<div class="ip-list-item-content">
<div class="ip-list-item-title">File.pdf</div>
<div class="ip-list-item-meta">2.4 MB</div>
</div>
<div class="ip-list-item-action">
<button class="ip-btn">Download</button>
</div>
</div>
</div>
<div class="ip-window-footer flex justify-center">
<nav class="ip-pagination">...</nav>
</div>
</div>Application layouts with navigation, sidebars, and multi-pane views.
Complete page structure with header navigation, main content, and footer.
This layout demonstrates a complete page structure with header navigation and footer. The main content area grows to fill available space.
Content for the first feature section.
Content for the second feature section.
<div class="flex flex-col min-h-screen">
<header class="shrink-0 border-b border-secondary p-3">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<div class="flex items-center gap-4">
<span class="font-display text-sm text-accent uppercase">Brand</span>
<nav class="ip-nav-list hidden sm:flex">
<a href="#" class="active">Home</a>
<a href="#">Products</a>
</nav>
</div>
<div class="flex items-center gap-2">
<button class="ip-btn">Sign In</button>
<button class="ip-btn-primary">Sign Up</button>
</div>
</div>
</header>
<main class="flex-1 p-4">
<!-- Main content -->
</main>
<footer class="shrink-0 border-t border-secondary p-3">
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
<div class="font-nav text-xs text-secondary/50 uppercase">© 2025 Brand</div>
<nav class="ip-nav-list">
<a href="#">Privacy</a>
<a href="#">Terms</a>
</nav>
</div>
</footer>
</div>Fixed navigation sidebar with main content area. Stacks on mobile.
Main content area that takes remaining space. The sidebar collapses to a horizontal nav on mobile.
<div class="flex flex-col lg:flex-row min-h-screen">
<aside class="w-full lg:w-56 shrink-0 border-b lg:border-r border-secondary p-3">
<div class="font-display text-sm text-accent uppercase mb-4">App Name</div>
<div class="ip-nav-group">
<div class="ip-nav-group-label">Main</div>
<nav class="ip-nav-list-vertical">
<a href="#" class="active">Dashboard</a>
<a href="#">Analytics</a>
</nav>
</div>
</aside>
<main class="flex-1 p-4">
<h2 class="ip-title">Dashboard</h2>
<!-- Content -->
</main>
</div>List panel with detail view. Stacks on mobile.
<div class="flex flex-col md:flex-row min-h-screen">
<div class="w-full md:w-1/3 shrink-0 border-r border-secondary">
<div class="p-2 border-b border-secondary">
<input type="text" class="ip-input w-full" placeholder="Search...">
</div>
<div class="ip-list-item bg-accent/10">
<!-- Selected item -->
</div>
<div class="ip-list-item">...</div>
</div>
<div class="flex-1 p-4">
<!-- Detail view -->
</div>
</div>Skeleton placeholders and empty states using ip-skeleton and ip-empty.
Loading placeholder for card grids.
<div class="ip-panel">
<div class="ip-panel-header">
<div class="ip-skeleton ip-skeleton-text w-20"></div>
</div>
<div class="ip-panel-body space-y-2">
<div class="ip-skeleton ip-skeleton-text w-3/4"></div>
<div class="ip-skeleton ip-skeleton-text w-full"></div>
<div class="ip-skeleton ip-skeleton-text w-1/2"></div>
</div>
</div>Loading placeholder for list items with avatars.
<div class="ip-list-item">
<div class="ip-list-item-icon">
<div class="ip-skeleton ip-skeleton-circle"></div>
</div>
<div class="ip-list-item-content space-y-1">
<div class="ip-skeleton ip-skeleton-text w-1/3"></div>
<div class="ip-skeleton ip-skeleton-text w-1/4"></div>
</div>
</div>Placeholder for when no data is available.
<div class="ip-empty">
<div class="ip-empty-icon">
<svg>...</svg>
</div>
<div class="ip-empty-title">No Documents</div>
<div class="ip-empty-message">Upload your first document.</div>
<div class="ip-empty-action">
<button class="ip-btn-primary">Upload File</button>
</div>
</div>