🎨 Template Showcase

Explore the Design System & Templates

Browse the available templates and design components used throughout the Ethoria website. These templates ensure consistency and make content creation easy and efficient.

Available Templates

πŸ‘€

Character Template

Comprehensive character pages with tabs for backstory, stats, and special features
🏰

Campaign Template

Campaign landing pages with navigation to characters, NPCs, maps, and chronicles
πŸ‘₯

NPC Template

Organized NPC pages with categories for allies, enemies, and neutral characters
πŸ—ΊοΈ

Maps Template

Map organization system for world maps, regional maps, city maps, and dungeons

Character Template Features

πŸ“Έ Portrait & Header

Visual Design

Large character portrait with level overlay, quick stats badges, and character title information. Responsive design that works on all devices.

View Example

πŸ“– Three-Tab System

Content Organization

Backstory tab with personality traits, Character Info tab with D&D stats, and Special Features tab with abilities and equipment.

See Tabs

πŸ“± Mobile Responsive

Device Compatibility

Tabs stack vertically on mobile, portrait scales appropriately, and touch-friendly interface ensures great experience on all devices.

Test Mobile

Template Usage & Features

Character Pages

Rich Character Profiles

Complete D&D character information with backstory, stats, abilities, and campaign moments. Three-tab design keeps content organized and accessible.

Campaign Structure

Organized Content

Each campaign has dedicated sections for characters, NPCs, maps, and chronicles. Consistent navigation and styling across all pages.

Design System

Consistent Styling

Unified color palette, typography, and component styles. CSS variables ensure easy maintenance and consistent appearance.

Easy Deployment

S3/CloudFront Ready

Static HTML structure optimized for S3 hosting and CloudFront CDN distribution. No server-side processing required.

πŸ› οΈ Template Files & Documentation

All templates are located in the /shared/templates/ directory with comprehensive documentation and examples.

πŸ“„ Template Files
πŸ“š Usage Guides
🎨 Style System
πŸ“± Responsive Design

Available Template Files:

character-template.html - Complete character page template
CHARACTER_TEMPLATE_GUIDE.md - Detailed usage instructions
page-template.html - Basic page structure template
STRUCTURE.md - Website organization guide
View Documentation

Implementation Example

Raevin Character Page

Complete Implementation

The Raevin character page demonstrates all template features:

  • Character portrait with level overlay
  • Comprehensive backstory with personality traits
  • Complete D&D 5e stats and abilities
  • Special features, equipment, and spells
  • Notable campaign moments timeline
  • Mobile-responsive three-tab design
View Example

Campaign Structure

Organized Layout

Each campaign follows the same structure:

  • Campaign landing page with navigation
  • Characters section with individual profiles
  • NPCs organized by relationship
  • Maps categorized by scope
  • Chronicles with session logs
  • Dedicated assets directories
Explore Structure

Design Consistency

Unified Experience

All templates share consistent design elements:

  • Unified color palette and typography
  • Responsive hamburger navigation
  • Card-based content layout
  • Smooth animations and transitions
  • Mobile-first responsive design
  • Accessible and SEO-friendly structure
See Homepage