SmallStack

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.

Left Column

Use CSS Grid for multi-column layouts.

Your content here

Right Column

Columns automatically stack on mobile.

Form Components

Text Input Help text appears below inputs

Select

Textarea

Date

Click the calendar icon to pick a date

Date & Time

Combined date and time picker

File Upload Select a file to upload (any type)

Image Upload

Drag & drop an image or click to browse

Accepts JPG, PNG, GIF, WebP

Document Upload

Drag & drop a document or click to browse

Accepts PDF, DOC, DOCX, TXT

Button Styles

Link as Button

Buttons with Icons

Quick Links Pattern

Home Documentation

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!

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/smallstack/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>

Starter Page