Templates
Complete, copy-ready page templates to jumpstart your projects. Each template includes proper HTML structure, CSS imports, and light/dark theme toggle.
<link> tags based on your project structure.
Header navigation, hero section, features grid, stats, CTA, and footer. Perfect for product pages and marketing sites.
Sidebar navigation, stats row, activity feed, data table with pagination. For admin panels and analytics apps.
Left sidebar nav, article content, right table of contents. For docs sites, wikis, and knowledge bases.
Header nav, featured post, post grid with cards, pagination. For blogs, news sites, and content platforms.
Search bar, filter sidebar, listing grid with cards. For directories, catalogs, and resource listings.
Usage
1. Copy the template
Each template page includes the full HTML source. Copy it into your project.
2. Adjust CSS paths
Update the <link> paths to match your project structure:
<!-- Adjust paths based on your structure -->
<link rel="stylesheet" href="../interplanetary-ui/css/themes/planetary.css">
<link rel="stylesheet" href="../interplanetary-ui/css/fonts/terminal.css">
<link rel="stylesheet" href="./css/styles.css">3. Base body classes
Always include these classes on your <body>:
<body class="bg-primary text-secondary font-body text-xs min-h-screen">4. Theme toggle (optional)
Include theme.js and call themeManager.toggle() to switch light/dark:
<script src="../interplanetary-ui/js/theme.js"></script>
<button onclick="themeManager.toggle()">Toggle Theme</button>