django-spire 0.23.4__py3-none-any.whl

django_spire/theme/templates/django_spire/theme/card/badges_preview_card.html

@@ -0,0 +1,29 @@
+{% extends 'django_spire/theme/card/base_preview_card.html' %}
+
+{% block card_title %}Badges{% endblock %}
+
+{% block card_button %}
+    {% url 'django_spire:theme:page:badges' as badges_url %}
+    {% include 'django_spire/button/primary_button.html' with button_text='Full Preview' button_href=badges_url %}
+{% endblock %}
+
+{% block preview_card_icon %}bi bi-tag{% endblock %}
+
+{% block preview_card_subtitle %}
+    Badge Styles
+{% endblock %}
+
+{% block preview_card_description %}
+    View all badge types and colors
+{% endblock %}
+
+{% block preview_card_content %}
+    {% include 'django_spire/badge/primary_badge.html' with badge_text='Primary' badge_class='me-1' %}
+    {% include 'django_spire/badge/secondary_badge.html' with badge_text='Secondary' badge_class='me-1' %}
+    {% include 'django_spire/badge/accent_badge.html' with badge_text='Accent' badge_class='me-1' %}
+    {% include 'django_spire/badge/success_badge.html' with badge_text='Success' badge_class='me-1' %}
+    {% include 'django_spire/badge/warning_badge.html' with badge_text='Warning' badge_class='me-1' %}
+    {% include 'django_spire/badge/danger_badge.html' with badge_text='Danger' badge_class='me-1' %}
+    {% include 'django_spire/badge/primary_outlined_badge.html' with badge_text='Outlined' badge_class='me-1' %}
+    {% include 'django_spire/badge/secondary_outlined_badge.html' with badge_text='Secondary' badge_class='me-1' %}
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/base_preview_card.html

@@ -0,0 +1,24 @@
+{% extends 'django_spire/card/title_card.html' %}
+
+{% block card_class %}h-100{% endblock %}
+
+{% block card_title_content %}
+    <div class="text-center py-3">
+        <i class="{% block preview_card_icon %}bi bi-card-text{% endblock %} fs-1 mb-3 text-app-primary"></i>
+
+        <h5 class="mb-3">
+            {% block preview_card_subtitle %}
+            {% endblock %}
+        </h5>
+
+        <div class="mb-3">
+            {% block preview_card_description %}
+            {% endblock %}
+        </div>
+
+        <div class="border p-3 rounded">
+            {% block preview_card_content %}
+            {% endblock %}
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/borders_preview_card.html

@@ -0,0 +1,42 @@
+{% extends 'django_spire/theme/card/base_preview_card.html' %}
+
+{% block card_title %}Borders{% endblock %}
+
+
+{% block card_button %}
+    {% url 'django_spire:theme:page:borders' as borders_url %}
+    {% include 'django_spire/button/primary_button.html' with button_text='Full Preview' button_href=borders_url %}
+{% endblock %}
+
+{% block preview_card_icon %}bi bi-bounding-box{% endblock %}
+
+{% block preview_card_subtitle %}
+    Border Styles
+{% endblock %}
+
+{% block preview_card_description %}
+    Explore border colors and widths
+{% endblock %}
+
+{% block preview_card_content %}
+    <div class="preview-sample">
+        <div class="mb-2 d-flex justify-content-center">
+            <!-- Primary borders -->
+            <div class="p-2 m-1 border border-app-primary" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 border border-app-primary-soft" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 border border-app-primary-dark" style="width: 40px; height: 40px;"></div>
+        </div>
+        <div class="mb-2 d-flex justify-content-center">
+            <!-- Secondary borders -->
+            <div class="p-2 m-1 border border-app-secondary" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 border border-app-secondary-soft" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 border border-app-secondary-dark" style="width: 40px; height: 40px;"></div>
+        </div>
+        <div class="d-flex justify-content-center">
+            <!-- Accent borders -->
+            <div class="p-2 m-1 border border-app-accent" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 border border-app-accent-soft" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 border border-app-accent-dark" style="width: 40px; height: 40px;"></div>
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/buttons_preview_card.html

@@ -0,0 +1,42 @@
+{% extends 'django_spire/theme/card/base_preview_card.html' %}
+
+{% block card_title %}Buttons{% endblock %}
+
+
+{% block card_button %}
+    {% url 'django_spire:theme:page:buttons' as buttons_url %}
+    {% include 'django_spire/button/primary_button.html' with button_text='Full Preview' button_href=buttons_url %}
+{% endblock %}
+
+{% block preview_card_icon %}bi bi-hand-index-thumb{% endblock %}
+
+{% block preview_card_subtitle %}
+    Button Styles
+{% endblock %}
+
+{% block preview_card_description %}
+    Explore all button variants and sizes
+{% endblock %}
+
+{% block preview_card_content %}
+    <div class="preview-sample">
+        <div class="mb-2">
+            <!-- Primary buttons -->
+            {% include 'django_spire/button/primary_button.html' with button_text='Primary' button_size='sm' %}
+            {% include 'django_spire/button/primary_dark_button.html' with button_text='Dark' button_size='sm' %}
+            {% include 'django_spire/button/primary_outlined_button.html' with button_text='Outlined' button_size='sm' %}
+        </div>
+        <div class="mb-2">
+            <!-- Secondary buttons -->
+            {% include 'django_spire/button/secondary_button.html' with button_text='Secondary' button_size='sm' %}
+            {% include 'django_spire/button/secondary_dark_button.html' with button_text='Dark' button_size='sm' %}
+            {% include 'django_spire/button/secondary_outlined_button.html' with button_text='Outlined' button_size='sm' %}
+        </div>
+        <div>
+            <!-- Accent buttons -->
+            {% include 'django_spire/button/accent_button.html' with button_text='Accent' button_size='sm' %}
+            {% include 'django_spire/button/accent_dark_button.html' with button_text='Dark' button_size='sm' %}
+            {% include 'django_spire/button/accent_outlined_button.html' with button_text='Outlined' button_size='sm' %}
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/colors_preview_card.html

@@ -0,0 +1,40 @@
+{% extends 'django_spire/theme/card/base_preview_card.html' %}
+
+{% block card_title %}Colors{% endblock %}
+
+
+{% block card_button %}
+    {% url 'django_spire:theme:page:colors' as colors_url %}
+    {% include 'django_spire/button/primary_button.html' with button_text='Full Preview' button_href=colors_url %}
+{% endblock %}
+
+{% block preview_card_icon %}bi bi-palette{% endblock %}
+
+{% block preview_card_subtitle %}
+    Color Palette
+{% endblock %}
+
+{% block preview_card_description %}
+    Explore the complete color system
+{% endblock %}
+
+{% block preview_card_content %}
+    <div class="preview-sample">
+        <div class="d-flex flex-wrap">
+            <!-- Primary colors -->
+            <div class="p-2 m-1 bg-app-primary" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 bg-app-primary-soft" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 bg-app-primary-dark" style="width: 40px; height: 40px;"></div>
+
+            <!-- Secondary colors -->
+            <div class="p-2 m-1 bg-app-secondary" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 bg-app-secondary-soft" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 bg-app-secondary-dark" style="width: 40px; height: 40px;"></div>
+
+            <!-- Accent colors -->
+            <div class="p-2 m-1 bg-app-accent" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 bg-app-accent-soft" style="width: 40px; height: 40px;"></div>
+            <div class="p-2 m-1 bg-app-accent-dark" style="width: 40px; height: 40px;"></div>
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/django_glue_preview_card.html

@@ -0,0 +1,42 @@
+{% extends 'django_spire/theme/card/base_preview_card.html' %}
+
+{% block card_title %}Django Glue Fields{% endblock %}
+
+{% block card_button %}
+    {% url 'django_spire:theme:page:django_glue' as django_glue_url %}
+    {% include 'django_spire/button/primary_button.html' with button_text='Full Preview' button_href=django_glue_url %}
+{% endblock %}
+
+{% block preview_card_icon %}bi bi-file-text{% endblock %}
+
+{% block preview_card_subtitle %}
+    Django Glue
+{% endblock %}
+
+{% block preview_card_description %}
+    Explore how the colour scheme works with Django Glue fields.
+{% endblock %}
+
+{% block preview_card_content %}
+    <div
+        class="row preview-sample"
+        x-data="{
+            default_choices: [[1, 'Choice 1'], [2, 'Choice 2'], [3, 'Choice 3']],
+            char_field: new GlueCharField('char_field', {value: 'Text...'}),
+            text_field: new GlueCharField('text_field', {value: 'Text...'}),
+            select_field: new GlueIntegerField('select_field'),
+            multi_select_field: new GlueCharField('multi_select_field'),
+            init() {
+                this.select_field.choices = this.default_choices;
+                this.multi_select_field.choices = this.default_choices;
+            }
+        }"
+    >
+        <div class="col-12 mt-2">
+            {% include 'django_glue/form/field/char_field.html' with glue_field='char_field' %}
+        </div>
+        <div class="col-12 mt-2">
+            {% include 'django_glue/form/field/select_field.html' with glue_field='select_field' %}
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/example_preview_card.html

@@ -0,0 +1,34 @@
+{% extends 'django_spire/theme/card/base_preview_card.html' %}
+
+{% block card_title %}Example{% endblock %}
+
+{% block card_button %}
+    {% url 'django_spire:theme:page:example' as example_url %}
+    {% include 'django_spire/button/primary_button.html' with button_text='Full Preview' button_href=example_url %}
+{% endblock %}
+
+{% block preview_card_icon %}bi bi-grid-1x2{% endblock %}
+
+{% block preview_card_subtitle %}
+    Example
+{% endblock %}
+
+{% block preview_card_description %}
+    Explore an example page that contains some of our core templates.
+{% endblock %}
+
+{% block preview_card_content %}
+    <div class="preview-sample row">
+        <div class="col">
+            {% include 'django_spire/element/attribute_element.html' with attribute_title='Title' attribute_value='Value' %}
+        </div>
+        <div class="col text-center">
+            {% include 'django_spire/element/attribute_element.html' with attribute_title='Dropdown' %}
+            {% include 'django_spire/dropdown/ellipsis_dropdown.html' with view_url='#' edit_url='#' delete_url='#' link_css='text-start' %}
+        </div>
+        <div class="col text-center">
+            {% include 'django_spire/element/attribute_element.html' with attribute_title='Modal' %}
+            {% include 'django_spire/dropdown/ellipsis_modal_dropdown.html' with view_url='#' edit_url='#' delete_url='#' link_css='text-start' %}
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/preview_card.html

@@ -0,0 +1,35 @@
+{% extends 'django_spire/card/title_card.html' %}
+
+{% block card_class %}{{ card_class|default:"h-100" }}{% endblock %}
+
+{% block card_title %}
+    {{ card_title|default:"Preview" }}
+{% endblock %}
+
+{% block card_button %}
+    {% if card_link %}
+        <a href="{{ card_link }}" class="btn btn-sm btn-app-primary">
+            <i class="bi bi-eye me-1"></i> View Full Preview
+        </a>
+    {% endif %}
+{% endblock %}
+
+{% block card_title_content %}
+    <div class="text-center py-3">
+        {% if card_icon %}
+            <i class="{{ card_icon }} fs-1 mb-3 text-app-{{ card_color|default:"primary" }}"></i>
+        {% endif %}
+
+        <h5 class="mb-3">{{ card_subtitle|default:"" }}</h5>
+
+        <div class="mb-3">
+            {{ card_description|default:"" }}
+        </div>
+
+        {% if card_preview_content %}
+            <div class="preview-sample border p-3 rounded">
+                {{ card_preview_content }}
+            </div>
+        {% endif %}
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/card/typography_preview_card.html

@@ -0,0 +1,30 @@
+{% extends 'django_spire/theme/card/base_preview_card.html' %}
+
+{% block card_title %}Typography{% endblock %}
+
+
+{% block card_button %}
+    {% url 'django_spire:theme:page:typography' as typography_url %}
+    {% include 'django_spire/button/primary_button.html' with button_text='Full Preview' button_href=typography_url %}
+{% endblock %}
+
+{% block preview_card_icon %}bi bi-type{% endblock %}
+
+{% block preview_card_subtitle %}
+    Text Styles
+{% endblock %}
+
+{% block preview_card_description %}
+    View all heading styles and font sizes
+{% endblock %}
+
+{% block preview_card_content %}
+    <div class="preview-sample d-flex justify-content-center">
+        <div class="col text-start">
+            <div class="fs-4">Heading</div>
+            <div class="fs-6">Subheading</div>
+            <div class="fs--1">Small text</div>
+            <a href="#">Link</a>
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/element/theme_selector.html

@@ -0,0 +1,33 @@
+<div class="dropdown" x-data="{ families: [] }" x-init="$store.theme.families().then(f => families = f)">
+    <i
+        class="bi bi-palette {{ icon_size|default:'fs-2' }} mx-2 cursor-pointer"
+        id="theme_dropdown_button"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+    ></i>
+
+    <ul class="bg-app-layer-one dropdown-menu py-0" aria-labelledby="theme_dropdown_button">
+        <li>
+            <small><p class="dropdown-header fs--1" x-text="$store.theme.get_current_display_name()"></p></small>
+        </li>
+
+        <li>
+            <a class="dropdown-item fs--1 bg-app-layer-three-hover" href="#" @click.prevent="$store.theme.toggle()">
+                Toggle Mode
+            </a>
+        </li>
+
+        <li><hr class="dropdown-divider"></li>
+
+        <template x-for="family in families" :key="family.value">
+            <li>
+                <a
+                    class="dropdown-item fs--1 bg-app-layer-three-hover"
+                    href="#"
+                    @click.prevent="$store.theme.set_family(family.value)"
+                    x-text="family.name"
+                ></a>
+            </li>
+        </template>
+    </ul>
+</div>

django_spire/theme/templates/django_spire/theme/element/theme_toggle_element.html

@@ -0,0 +1,8 @@
+<button
+    @click="$store.theme.toggle()"
+    class="theme-toggle"
+    type="button"
+    x-data
+>
+    <i class="bi" :class="$store.theme.is_mode('dark') ? 'bi-moon-fill' : 'bi-sun-fill'"></i>
+</button>

django_spire/theme/templates/django_spire/theme/example/card/example_title_card.html

@@ -0,0 +1,25 @@
+{% extends 'django_spire/card/title_card.html' %}
+
+{% block card_title %}
+	Title Card
+{% endblock %}
+
+{% block card_button %}
+    <div x-data>
+	    {% include 'django_spire/button/primary_button.html' with button_text='Button' x_button_click='alert(`🐇🥚`)' %}
+    </div>
+{% endblock %}
+
+{% block card_title_content %}
+    <div class="row">
+	    <div class="col-12 border-bottom pb-2">
+            {% include 'django_spire/theme/example/item/example_item.html' %}
+        </div>
+	    <div class="col-12 border-bottom pb-2">
+            {% include 'django_spire/theme/example/item/example_item.html' %}
+        </div>
+	    <div class="col-12 border-bottom pb-2">
+            {% include 'django_spire/theme/example/item/example_item.html' %}
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/example/container/example_container.html

@@ -0,0 +1,17 @@
+{% extends 'django_spire/container/container.html' %}
+
+{% block container_title %}
+	Container
+{% endblock %}
+
+{% block container_button %}
+	{% include 'django_spire/button/primary_button.html' with button_text='Button' button_class='btn-md' %}
+{% endblock %}
+
+{% block container_content %}
+    <div class="row">
+        <div class="col-12">
+            {% include 'django_spire/theme/example/tab/example_tab.html' %}
+        </div>
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/example/form/example_form.html

@@ -0,0 +1,97 @@
+<h2 class="mb-4">Forms</h2>
+
+<div
+    class="row"
+    x-data="{
+        char_field: new GlueCharField('char_field', {value: 'Text...'}),
+        color_field: new GlueCharField('color_field', {value: '#000000'}),
+        date_field: new GlueCharField('date_field'),
+        datetime_field: new GlueCharField('datetime_field'),
+        decimal_field: new GlueCharField('decimal_field'),
+        email_field: new GlueCharField('email_field'),
+        input_field: new GlueCharField('input_field'),
+        multi_file_field: new GlueCharField('multi_file_field'),
+        multi_select_field: new GlueCharField('multi_select_field'),
+        number_field: new GlueCharField('number_field'),
+        password_field: new GlueCharField('password_field'),
+        radio_field: new GlueCharField('radio_field'),
+        range_field: new GlueCharField('range_field'),
+        search_and_select_field: new GlueCharField('search_and_select_field'),
+        select_field: new GlueCharField('select_field'),
+        single_checkbox_field: new GlueCharField('single_checkbox_field'),
+        single_file_field: new GlueCharField('single_file_field'),
+        telephone_field: new GlueCharField('telephone_field'),
+        text_field: new GlueCharField('text_field'),
+        time_field: new GlueCharField('time_field'),
+
+        default_choices: [[1, 'Choice 1'], [2, 'Choice 2'], [3, 'Choice 3']],
+        init() {
+            this.select_field.choices = this.default_choices;
+            this.multi_select_field.choices = this.default_choices;
+        }
+    }"
+>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/char_field.html' with glue_field='char_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/color_field.html' with glue_field='color_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/date_field.html' with glue_field='date_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/datetime_field.html' with glue_field='datetime_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/decimal_field.html' with glue_field='decimal_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/email_field.html' with glue_field='email_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/input_field.html' with glue_field='input_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/multi_file_field.html' with glue_field='multi_file_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/multi_select_field.html' with glue_field='multi_select_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/number_field.html' with glue_field='number_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/password_field.html' with glue_field='password_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/radio_field.html' with glue_field='radio_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/range_field.html' with glue_field='range_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/search_and_select_field.html' with glue_field='search_and_select_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/select_field.html' with glue_field='select_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/single_checkbox_field.html' with glue_field='single_checkbox_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/single_file_field.html' with glue_field='single_file_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/telephone_field.html' with glue_field='telephone_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/text_field.html' with glue_field='text_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_glue/form/field/time_field.html' with glue_field='time_field' %}
+    </div>
+    <div class="col-12 mt-2">
+        {% include 'django_spire/contrib/form/button/form_submit_button.html' %}
+    </div>
+</div>

django_spire/theme/templates/django_spire/theme/example/form/example_form_card.html

@@ -0,0 +1,5 @@
+{% extends 'django_spire/card/card.html' %}
+
+{% block card_content %}
+    {% include 'django_spire/theme/example/form/example_form.html' %}
+{% endblock %}

django_spire/theme/templates/django_spire/theme/example/item/example_item.html

@@ -0,0 +1,25 @@
+{% extends 'django_spire/item/item.html' %}
+
+{% block item_title %}
+	Item
+{% endblock %}
+
+{% block item_row_content %}
+	<div class="col">
+        {% include 'django_spire/element/attribute_element.html' with attribute_title='Title' attribute_value='Value' %}
+    </div>
+	<div class="col">
+        {% include 'django_spire/element/attribute_element.html' with attribute_title='Title' attribute_value='Value' %}
+    </div>
+	<div class="col">
+        {% include 'django_spire/element/attribute_element.html' with attribute_title='Title' attribute_value='Value' %}
+    </div>
+    <div class="col-2 text-center">
+        {% include 'django_spire/element/attribute_element.html' with attribute_title='Dropdown' %}
+        {% include 'django_spire/dropdown/ellipsis_dropdown.html' with view_url='#' edit_url='#' delete_url='#' link_css='text-start' %}
+    </div>
+    <div class="col-1 text-center">
+        {% include 'django_spire/element/attribute_element.html' with attribute_title='Modal' %}
+        {% include 'django_spire/dropdown/ellipsis_modal_dropdown.html' with view_url='#' edit_url='#' delete_url='#' link_css='text-start' %}
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/example/page/example_page.html

@@ -0,0 +1,12 @@
+{% extends 'django_spire/page/full_page.html' %}
+
+{% block full_page_content %}
+    <div class="container">
+        <div class="mb-4">
+            {% url 'django_spire:theme:page:dashboard' as dashboard_url %}
+            {% include 'django_spire/button/primary_outlined_button.html' with button_text="Back to Dashboard" button_icon="bi bi-arrow-left" button_href=dashboard_url %}
+        </div>
+
+        {% include 'django_spire/theme/example/container/example_container.html' %}
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/example/tab/element/example_tab_section_element.html

@@ -0,0 +1,10 @@
+{% extends 'django_spire/tab/element/tab_section_element.html' %}
+
+{% block tab_section_content %}
+    <div class="mb-3">
+        {% include 'django_spire/note/note.html' with note_text='Note' %}
+    </div>
+    <div class="mb-3">
+	    {% include 'django_spire/theme/example/card/example_title_card.html' %}
+    </div>
+{% endblock %}

django_spire/theme/templates/django_spire/theme/example/tab/example_tab.html

@@ -0,0 +1,13 @@
+{% extends 'django_spire/tab/tab.html' %}
+
+{% block tab_triggers %}
+	{% include 'django_spire/tab/element/tab_trigger_element.html' with trigger_title='Example 1' %}
+	{% include 'django_spire/tab/element/tab_trigger_element.html' with trigger_title='Example 2' %}
+	{% include 'django_spire/tab/element/tab_trigger_element.html' with trigger_title='Example 3' %}
+{% endblock %}
+
+{% block tab_sections %}
+	{% include 'django_spire/theme/example/tab/element/example_tab_section_element.html' %}
+	{% include 'django_spire/theme/example/tab/element/example_tab_section_element.html' %}
+	{% include 'django_spire/theme/example/tab/element/example_tab_section_element.html' %}
+{% endblock %}

django_spire/theme/templates/django_spire/theme/page/badges_page.html

@@ -0,0 +1,10 @@
+{% extends 'django_spire/theme/page/theme_page.html' %}
+
+{% block theme_content %}
+    {% include 'django_spire/theme/section/badge_section.html' %}
+{% endblock %}
+
+{% block theme_on_card_content %}
+    {% include 'django_spire/theme/section/badge_section_card.html' %}
+{% endblock %}
+

django_spire/theme/templates/django_spire/theme/page/borders_page.html

@@ -0,0 +1,9 @@
+{% extends 'django_spire/theme/page/theme_page.html' %}
+
+{% block theme_content %}
+    {% include 'django_spire/theme/section/border_section.html' %}
+{% endblock %}
+
+{% block theme_on_card_content %}
+    {% include 'django_spire/theme/section/border_section_card.html' %}
+{% endblock %}

django_spire/theme/templates/django_spire/theme/page/buttons_page.html

@@ -0,0 +1,9 @@
+{% extends 'django_spire/theme/page/theme_page.html' %}
+
+{% block theme_content %}
+    {% include 'django_spire/theme/section/button_section.html' %}
+{% endblock %}
+
+{% block theme_on_card_content %}
+    {% include 'django_spire/theme/section/button_section_card.html' %}
+{% endblock %}

django_spire/theme/templates/django_spire/theme/page/colors_page.html

@@ -0,0 +1,9 @@
+{% extends 'django_spire/theme/page/theme_page.html' %}
+
+{% block theme_content %}
+    {% include 'django_spire/theme/section/color_section.html' %}
+{% endblock %}
+
+{% block theme_on_card_content %}
+    {% include 'django_spire/theme/section/color_section_card.html' %}
+{% endblock %}