📖 Wiki Page Examples

Simple examples of all the UI components used in the wiki pages.

📦 Basic Components

Regular Text Sections

This is a normal paragraph. Use <p> tags for regular text.

You can make text bold or italic. Add line breaks with <br>.

Code Blocks

Inline code: const x = 10;

Code blocks with syntax:

function hello() {
  console.log("Hello World!");
  return true;
}

🎨 Status Grid System

Use this for showing multiple cards in a grid:

Card Title

Description text goes here.

Extra detail or note

Another Card

More information here.

Status: Active

Third Card

You can have as many as you want.

Last updated: Today

📝 Stat Items (Vertical Lists)

Label Text
The main value or description goes here
Another Item
More detailed information can go in the value section

⚠️ Warning & Note Boxes

⚠️ Warning Box

Use this for important warnings, cautions, or safety information.

💡 Info Box

Use this for helpful tips, notes, or general information.

📊 Tables

Column 1 Column 2 Column 3
Row 1 Data More data Extra info
Row 2 Data Details Information
Last Row Final data End of table

🔗 Navigation Cards

📚 Documentation

Link to a documentation page

🔧 Tools

Link to tools section

📖 Guide

Link to a how-to guide

📋 Features List

🎯 Back Buttons

← Back to Wiki ← Back to Home ← Success Button ← Danger Button

🔤 HTML Code Examples

Basic Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<main>
  <h1>Page Title</h1>
  <p>Introduction text.</p>
  
  <nav>
    <a href="index.html">Home</a>
    <a href="wiki.html">Wiki</a>
  </nav>
  
  <!-- Your content here -->
  
  <a href="wiki.html" class="back-button">← Back to Wiki</a>
</main>
</body>
</html>

Status Grid HTML

<div class="status-grid">
  <div class="status-card">
    <h3>Card Title</h3>
    <p>Description text.</p>
    <div class="status-detail">Extra detail</div>
  </div>
  
  <div class="status-card">
    <h3>Another Card</h3>
    <p>More information.</p>
    <div class="status-detail">Status: Ready</div>
  </div>
</div>

Warning Box HTML

<div class="warning-note" style="background: #332211; border: 1px solid #664411; border-left: 4px solid #f59e0b; padding: 20px; border-radius: 4px; margin: 20px 0;">
  <h3 style="color: #f59e0b; margin-top: 0;">⚠️ Warning Title</h3>
  <p>Warning text goes here.</p>
</div>