Directory Template
A listing template with search bar, filter sidebar, and listing grid. Ideal for directories, catalogs, and resource listings.
Preview
Structure
- Header — Logo, nav links, theme toggle, add listing CTA
- Search Bar — Text input, category/location selects, search button
- Filter Sidebar — ip-window with checkboxes and radio buttons
- Listing Grid — 2-column grid of ip-panel listing cards
- Listing Card — Avatar, title, description, tags, action
- Pagination — ip-pagination for results navigation
- Footer — Copyright, nav links
Key Patterns
Listing Card
<div class="ip-panel">
<div class="ip-panel-header">
<span>Category</span>
<span class="ip-badge ip-badge-success">Active</span>
</div>
<div class="ip-panel-body">
<div class="flex gap-3">
<div class="ip-avatar ip-avatar-lg shrink-0">AC</div>
<div>
<div class="ip-title">Company Name</div>
<p class="text-secondary mt-1">Description...</p>
<div class="flex gap-1 mt-2">
<span class="ip-tag">Tag</span>
</div>
</div>
</div>
</div>
<div class="ip-panel-footer ip-action-group">
<a href="#" class="ip-action">View Profile →</a>
</div>
</div>Filter Sidebar
<div class="ip-window">
<div class="ip-window-header">Filters</div>
<div class="ip-window-body space-y-4">
<div class="ip-form-group">
<label class="ip-label">Category</label>
<div class="space-y-1 mt-1">
<label class="ip-checkbox">
<input type="checkbox" class="ip-checkbox-input" checked>
<span class="ip-checkbox-box"><span class="ip-checkbox-check"></span></span>
<span class="ip-checkbox-label">Option</span>
</label>
</div>
</div>
</div>
<div class="ip-window-footer">
<button class="ip-btn w-full">Clear Filters</button>
</div>
</div>Search Bar
<div class="border-b border-secondary bg-secondary/5">
<div class="max-w-6xl mx-auto px-4 py-4">
<div class="flex flex-col md:flex-row gap-3">
<div class="flex-1">
<input type="text" class="ip-input w-full" placeholder="Search...">
</div>
<div class="flex gap-2">
<div class="ip-select-wrapper">
<select class="ip-input">
<option>All Categories</option>
</select>
</div>
<button class="ip-btn-primary">Search</button>
</div>
</div>
</div>
</div>Patterns Used
This template uses the following patterns from the Layouts & Patterns documentation:
- Full Page Layout — Header navigation, main content, footer structure
- Card Grid — 2-column responsive grid for listing cards
- Master-Detail — Filter sidebar alongside listing grid
Theme Switcher
This template includes the theme switcher component for real-time theme, font, and mode changes. Theme preferences persist across page navigations via localStorage.
<!-- Include theme switcher in head -->
<link rel="stylesheet" href="/path/to/themes/planetary.css" id="theme-css">
<link rel="stylesheet" href="/path/to/fonts/terminal.css" id="font-css">
<script src="/path/to/theme.js"></script>
<script src="/path/to/theme-switcher.js" data-theme-base="/path/to/css"></script>
<!-- Add container in header -->
<div id="theme-switcher-container"></div>
<!-- Initialize on DOMContentLoaded -->
<script>
document.addEventListener('DOMContentLoaded', function() {
themeSwitcher.createSwitcher('#theme-switcher-container');
});
</script>Source Code
directory.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Directory — Interplanetary UI</title>
<link rel="stylesheet" href="../interplanetary-ui/css/themes/planetary.css" id="theme-css">
<link rel="stylesheet" href="../interplanetary-ui/css/fonts/terminal.css" id="font-css">
<link rel="stylesheet" href="./css/styles.css">
<script src="../interplanetary-ui/js/theme.js"></script>
<script src="../interplanetary-ui/js/theme-switcher.js" data-theme-base="../interplanetary-ui/css"></script>
</head>
<body class="bg-primary text-secondary font-body text-xs min-h-screen">
<div class="flex flex-col min-h-screen">
<!-- Header -->
<header class="border-b border-secondary">
<div class="max-w-6xl mx-auto px-4 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-6">
<a href="#" class="font-display text-sm text-accent uppercase">Directory</a>
<nav class="ip-nav-list hidden md:flex">
<a href="#" class="active">Browse</a>
<a href="#">Categories</a>
</nav>
</div>
<div class="flex items-center gap-2">
<div id="theme-switcher-container"></div>
<a href="#" class="ip-btn-primary">Add Listing</a>
</div>
</div>
</div>
</header>
<!-- Search Bar -->
<div class="border-b border-secondary bg-secondary/5">
<div class="max-w-6xl mx-auto px-4 py-4">
<div class="flex flex-col md:flex-row gap-3">
<div class="flex-1">
<input type="text" class="ip-input w-full" placeholder="Search...">
</div>
<div class="flex gap-2">
<div class="ip-select-wrapper">
<select class="ip-input">
<option>All Categories</option>
</select>
</div>
<button class="ip-btn-primary">Search</button>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<main class="flex-1 py-6">
<div class="max-w-6xl mx-auto px-4">
<div class="flex flex-col lg:flex-row gap-6">
<!-- Filters Sidebar -->
<aside class="lg:w-56 shrink-0">
<div class="ip-window">
<div class="ip-window-header">Filters</div>
<div class="ip-window-body space-y-4">
<div class="ip-form-group">
<label class="ip-label">Category</label>
<div class="space-y-1 mt-1">
<label class="ip-checkbox">
<input type="checkbox" class="ip-checkbox-input">
<span class="ip-checkbox-box"><span class="ip-checkbox-check"></span></span>
<span class="ip-checkbox-label">Option</span>
</label>
</div>
</div>
</div>
<div class="ip-window-footer">
<button class="ip-btn w-full">Clear Filters</button>
</div>
</div>
</aside>
<!-- Listings -->
<div class="flex-1">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="ip-panel">
<div class="ip-panel-header">
<span>Category</span>
<span class="ip-badge ip-badge-success">Active</span>
</div>
<div class="ip-panel-body">
<div class="flex gap-3">
<div class="ip-avatar ip-avatar-lg shrink-0">AC</div>
<div>
<div class="ip-title">Company Name</div>
<p class="text-secondary mt-1">Description...</p>
</div>
</div>
</div>
<div class="ip-panel-footer ip-action-group">
<a href="#" class="ip-action">View Profile →</a>
</div>
</div>
<!-- More listings... -->
</div>
<div class="flex justify-center mt-6">
<nav class="ip-pagination">
<a href="#" class="ip-pagination-item">←</a>
<a href="#" class="ip-pagination-item active">1</a>
<a href="#" class="ip-pagination-item">2</a>
<a href="#" class="ip-pagination-item">→</a>
</nav>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-secondary py-6">
<div class="max-w-6xl mx-auto px-4">
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div class="font-nav text-xs text-secondary/50 uppercase">© 2025 Your Company</div>
<nav class="ip-nav-list">
<a href="#">Privacy</a>
<a href="#">Terms</a>
</nav>
</div>
</div>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
themeSwitcher.createSwitcher('#theme-switcher-container');
});
</script>
</body>
</html>