Blog Template
A content template with header navigation, featured post, post grid, and pagination. Perfect for blogs, news sites, and content platforms.
Preview
Structure
- Header — Logo, nav links, theme toggle, subscribe button
- Featured Post — Large ip-panel with image, tags, title, excerpt
- Post Grid — 3-column grid of ip-panel post cards
- Post Card — Tags, title, excerpt, meta (date, read time)
- Pagination — ip-pagination for page navigation
- Footer — Copyright, social links
Key Patterns
Post Card
<article class="ip-panel">
<div class="ip-panel-body">
<div class="flex gap-1 mb-2">
<span class="ip-tag">Category</span>
<span class="ip-tag ip-tag-success">New</span>
</div>
<h3 class="ip-title">Post Title</h3>
<p class="text-secondary mt-2 mb-3">Excerpt...</p>
<div class="flex items-center gap-2 text-secondary/50 text-xs">
<span>Jan 10, 2025</span>
<span>•</span>
<span>3 min read</span>
</div>
</div>
<div class="ip-panel-footer ip-action-group">
<a href="#" class="ip-action">Read →</a>
</div>
</article>Featured Post Layout
<div class="ip-panel">
<div class="ip-panel-header">Featured</div>
<div class="ip-panel-body">
<div class="flex flex-col lg:flex-row gap-6">
<div class="lg:w-1/2 h-48 bg-secondary/10">Image</div>
<div class="lg:w-1/2">
<!-- Content -->
</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 — 3-column responsive grid for post cards
- Horizontal Card — Featured post with side-by-side image and content
- Post List — Article cards with tags, metadata, and excerpts
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
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog — 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-5xl 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">Blog</a>
<nav class="ip-nav-list hidden md:flex">
<a href="#" class="active">All Posts</a>
<a href="#">Tutorials</a>
<a href="#">Updates</a>
</nav>
</div>
<div class="flex items-center gap-2">
<div id="theme-switcher-container"></div>
<a href="#" class="ip-btn">Subscribe</a>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 py-8">
<div class="max-w-5xl mx-auto px-4">
<!-- Featured Post -->
<section class="mb-10">
<div class="ip-panel">
<div class="ip-panel-header">Featured</div>
<div class="ip-panel-body">
<div class="flex flex-col lg:flex-row gap-6">
<div class="lg:w-1/2 h-48 bg-secondary/10 border"></div>
<div class="lg:w-1/2">
<div class="flex gap-2 mb-3">
<span class="ip-tag ip-tag-accent">Featured</span>
</div>
<h2 class="ip-title text-base mb-2">Featured Post Title</h2>
<p class="text-secondary mb-4">Excerpt...</p>
<a href="#" class="ip-btn">Read →</a>
</div>
</div>
</div>
</div>
</section>
<!-- Post Grid -->
<section>
<h2 class="font-display text-sm text-accent uppercase mb-4">Recent Posts</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<article class="ip-panel">
<div class="ip-panel-body">
<div class="flex gap-1 mb-2">
<span class="ip-tag">Category</span>
</div>
<h3 class="ip-title">Post Title</h3>
<p class="text-secondary mt-2 mb-3">Excerpt...</p>
<div class="text-secondary/50 text-xs">Jan 10, 2025 • 3 min</div>
</div>
<div class="ip-panel-footer ip-action-group">
<a href="#" class="ip-action">Read →</a>
</div>
</article>
<!-- More posts... -->
</div>
<div class="flex justify-center mt-8">
<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>
</section>
</div>
</main>
<!-- Footer -->
<footer class="border-t border-secondary py-6">
<div class="max-w-5xl 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="#">RSS</a>
<a href="#">Twitter</a>
</nav>
</div>
</div>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
themeSwitcher.createSwitcher('#theme-switcher-container');
});
</script>
</body>
</html>