{# ============================================================================ PAGE HEADER WITH ACTIONS Use this pattern for pages that need action buttons in the header ============================================================================ #}

Starter Page

A template demonstrating available components. Copy this file to create new pages.

View Docs
{# ============================================================================ CARD COMPONENT Basic content container with optional header ============================================================================ #}

Card Component

Cards are the primary content containers. They have a header and body section.

Use cards to group related content and create visual hierarchy on the page.

{# ============================================================================ TWO-COLUMN GRID Use CSS Grid for layouts - this pattern is common for forms ============================================================================ #}

Left Column

Use CSS Grid for multi-column layouts.

Your content here

Right Column

Columns automatically stack on mobile.

More content here
{# ============================================================================ FORM EXAMPLE Standard form layout with validation styling ============================================================================ #}

Form Components

Help text appears below inputs
{# ============================================================================ BUTTONS Various button styles available ============================================================================ #}

Button Styles

Link as Button

Buttons with Icons

{# ============================================================================ QUICK LINKS PATTERN Icon-based navigation links ============================================================================ #}

Quick Links Pattern

Home Documentation
{# ============================================================================ MESSAGES EXAMPLE Show how messages/alerts would appear ============================================================================ #}

Message Styles

Use Django's messages framework. Messages auto-dismiss after 5 seconds.

Success message - operation completed successfully!
Info message - here's some helpful information.
Warning message - please review before continuing.
Error message - something went wrong!
{# ============================================================================ CODE REFERENCE Quick reference for view and URL setup ============================================================================ #}

View & URL Setup

1. Create a view in config/views.py or your app's views.py:

def my_page_view(request):
    context = {'items': Item.objects.all()}
    return render(request, 'my_page.html', context)

2. Add URL pattern in config/urls.py or your app's urls.py:

from .views import my_page_view

urlpatterns = [
    path('my-page/', my_page_view, name='my_page'),
    # ... other urls
]

3. Add to sidebar (optional) in templates/admin_theme/includes/sidebar.html:

<li class="nav-item">
    <a href="{% url 'my_page' %}" class="nav-link {% nav_active 'my_page' %}">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <!-- icon path -->
        </svg>
        <span>My Page</span>
    </a>
</li>