Page Templates - Canvas Design System

info

These do not describe /app/. The consolidated app shell has its own frame and its own layout system — see App Shell Layouts.

Standard Page

The base template for all pages. Sets the page title, loads data, and wraps content between header and footer.

<?php
$page_title = 'Page Title';
require_once 'includes/data.php';
require_once 'includes/header.php';
?>

<div class="container">
  <h1>Page Title</h1>
  <!-- content -->
</div>

<?php require_once 'includes/footer.php'; ?>

info

header.php auto-loads component helpers, icon helper, and the unified header navigation. footer.php loads the toast container and component JavaScript.

Listing Page

Used for workshops, exercises, and icebreakers. Features filtering, sorting, and a card grid.

Header — Unified nav bar

Hero — ws_hero() with title, subtitle, stats

Filter Bar — Category tabs + search + sort

Card Grid — .listing-content-grid with ws_listing_card() items

Footer — Site footer

<?php
$page_title = 'Workshops';
require_once 'includes/data.php';
require_once 'includes/listing-helpers.php';
require_once 'includes/header.php';

$pageData = prepareListingPageData($workshops, 'workshop');
?>

<?= ws_hero('Browse our curated', 'workshop library.', [
    'badge' => 'Workshop Library',
    'badgeIcon' => 'school',
    'subtitle' => 'Find the perfect framework...',
]) ?>

<section class="section">
  <div class="listing-content-grid">
    <?php foreach ($pageData['items'] as $item):
      $card = prepareCardData($item, $pageData);
      echo ws_listing_card($card);
    endforeach; ?>
  </div>
</section>

<?php require_once 'includes/footer.php'; ?>

Detail Page

Content detail pages for individual workshops, exercises, and icebreakers. Features a hero area, content body, and sidebar.

Header — Unified nav bar

Breadcrumb — ws_breadcrumb()

Detail Header — Title, badges, actions

Content + Sidebar — Two-column layout (main content left, metadata right)

Related Items — .listing-content-grid with related cards

Footer — Site footer

<?php
$page_title = $workshop['title'];
require_once 'includes/data.php';
require_once 'includes/header.php';
?>

<?= ws_breadcrumb([
    ['label' => 'Home', 'href' => '/'],
    ['label' => 'Workshops', 'href' => '/library/workshops/'],
    ['label' => $workshop['title']],
]) ?>

<div class="detail-layout">
  <main class="detail-content">
    <!-- Content body -->
  </main>
  <aside class="detail-sidebar">
    <!-- Metadata, actions -->
  </aside>
</div>

<?php require_once 'includes/footer.php'; ?>

Landing Page

Marketing/landing pages for apps (Coach, Tips, Podcasts). Feature-heavy with hero, feature grids, and CTAs.

Header — Unified nav bar (can hide for standalone)

Hero Section — ws_hero()

Features Section — ws_section_header() + .features-grid

Content Section — Mixed content + sample cards

Coming Soon — .coming-soon-grid with future feature cards

Footer — Site footer

Form Page

Settings, admin forms, and data entry pages. Use ws_form_row() for consistent field layouts.

<?php
$page_title = 'Settings';
require_once 'includes/header.php';
?>

<div class="container" style="max-width: var(--container-sm);">
  <?= ws_section_header('Account Settings', ['align' => 'left']) ?>

  <form style="display: flex; flex-direction: column; gap: 20px;">
    <?= ws_form_row(ws_input('name', ['value' => $user['name']]), [
        'label' => 'Display Name',
        'required' => true,
    ]) ?>
    <?= ws_form_row(ws_input('email', ['type' => 'email', 'value' => $user['email']]), [
        'label' => 'Email',
        'required' => true,
        'helper' => 'Used for sign-in and notifications.',
    ]) ?>
    <?= ws_form_row(ws_select('timezone', $timezones), [
        'label' => 'Timezone',
    ]) ?>
    <?= ws_button('Save Changes', ['variant' => 'primary', 'type' => 'submit']) ?>
  </form>
</div>

<?php require_once 'includes/footer.php'; ?>