Container

Definition

A container is used to group related elements together, providing consistent styling and layout. It helps in organizing page titles, buttons, filters, and other content in a cohesive manner.

A common use case for a container is to group the page title, buttons, filters, and cards into a unified section.

Example

{% extends 'django_spire/container/container.html' %}

{% block container_title %}
    Recipes
{% endblock %}

{% block container_button %}
    {% include 'django_spire/button/primary_button.html' with button_text='Add' button_icon='bi bi-plus' %}
{% endblock %}

{% block container_filter_section %}
    <form
        x-data="{
            search_recipe() {
                alert('Nothing happens, but imagine in your mind the recipes being filtered!')
            }
        }"
    >
        <label>
            <input class="form-control" type="text" placeholder="Search Ingredients...">
        </label>
        {% include 'django_spire/button/primary_button.html' with button_text='Search' x_button_click="search_recipe()" %}
    </form>
{% endblock %}

{% block container_class %}pt-3{% endblock %}

{% block container_content %}
    {% include 'component/item/example_item.html' %}
{% endblock %}