{% extends "base/base.html" %} {% load static %} {% block title %}Design System Test - ThrillWiki{% endblock %} {% block content %}

Design System Test Page

This page validates all design system components are rendering correctly.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Regular paragraph text. This is a link.

Muted text for secondary information.

Small text

Large text

Monospace code

Color Palette

Primary Colors

Semantic Colors

Success
Warning
Error
Info

Buttons

Variants

{% include "components/ui/button.html" with text="Default" variant="default" %} {% include "components/ui/button.html" with text="Secondary" variant="secondary" %} {% include "components/ui/button.html" with text="Destructive" variant="destructive" %} {% include "components/ui/button.html" with text="Outline" variant="outline" %} {% include "components/ui/button.html" with text="Ghost" variant="ghost" %} {% include "components/ui/button.html" with text="Link" variant="link" %}

Sizes

{% include "components/ui/button.html" with text="Small" size="sm" %} {% include "components/ui/button.html" with text="Default" %} {% include "components/ui/button.html" with text="Large" size="lg" %}

With Icons

{% include "components/ui/button.html" with text="Search" icon="search" %} {% include "components/ui/button.html" with text="Settings" icon="settings" variant="secondary" %} {% include "components/ui/button.html" with text="Delete" icon="trash" variant="destructive" %}

Cards

{% include "components/ui/card.html" with title="Card Title" description="Card description text" body_content="

Card body content goes here.

" %} {% include "components/ui/card.html" with title="Another Card" description="With footer" body_content="

More content here.

" footer_content="" %} {% include "components/ui/card.html" with title="Minimal Card" body_content="

Just content, no description.

" %}

Form Inputs

{% include "components/ui/input.html" with name="text-input" label="Text Input" placeholder="Enter text..." %} {% include "components/ui/input.html" with name="email-input" label="Email Input" type="email" placeholder="email@example.com" %} {% include "components/ui/input.html" with name="disabled-input" label="Disabled Input" disabled="true" value="Disabled value" %} {% include "components/ui/input.html" with name="textarea-input" label="Textarea" type="textarea" placeholder="Enter longer text..." %}

Icons

Sizes

{% include "components/ui/icon.html" with name="star" size="xs" %}

xs

{% include "components/ui/icon.html" with name="star" size="sm" %}

sm

{% include "components/ui/icon.html" with name="star" size="md" %}

md

{% include "components/ui/icon.html" with name="star" size="lg" %}

lg

{% include "components/ui/icon.html" with name="star" size="xl" %}

xl

Common Icons

{% include "components/ui/icon.html" with name="search" %} {% include "components/ui/icon.html" with name="user" %} {% include "components/ui/icon.html" with name="settings" %} {% include "components/ui/icon.html" with name="heart" %} {% include "components/ui/icon.html" with name="star" %} {% include "components/ui/icon.html" with name="home" %} {% include "components/ui/icon.html" with name="menu" %} {% include "components/ui/icon.html" with name="close" %} {% include "components/ui/icon.html" with name="check" %} {% include "components/ui/icon.html" with name="plus" %} {% include "components/ui/icon.html" with name="minus" %} {% include "components/ui/icon.html" with name="edit" %} {% include "components/ui/icon.html" with name="trash" %} {% include "components/ui/icon.html" with name="copy" %} {% include "components/ui/icon.html" with name="external-link" %}

Responsive Utilities

Visibility

Visible on mobile only

Hidden on mobile

Grid Responsive

1
2
3
4

Stack to Row

Item 1
Item 2
Item 3

Accessibility

Focus States

Tab through these elements to see focus indicators:

Focusable Link

Touch Targets

Screen Reader Text

The button above has screen reader text "Settings"

Dark Mode

Toggle dark mode using the theme switcher in the navbar to test dark mode styling.

Background/Foreground

Card/Card Foreground

Muted/Muted Foreground

Primary/Primary Foreground

Alerts

Spacing & Layout

Container Sizes

container-sm (640px)

container-md (768px)

container-lg (1024px)

{% endblock %}