mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-23 06:51:09 -05:00
93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
{% comment %}
|
|
Card Component - Unified Django Template Version of shadcn/ui Card
|
|
|
|
A flexible card container with optional header, content, and footer sections.
|
|
Uses design tokens for consistent styling.
|
|
|
|
Usage Examples:
|
|
Basic card with title:
|
|
{% include 'components/ui/card.html' with title='Card Title' content='Card content here' %}
|
|
|
|
Card with all sections:
|
|
{% include 'components/ui/card.html' with title='Title' description='Subtitle' body_content='<p>Content</p>' footer_content='<button>Action</button>' %}
|
|
|
|
Card with custom header:
|
|
{% include 'components/ui/card.html' with header_content='<div>Custom header</div>' content='Content' %}
|
|
|
|
Card with block content (for more complex layouts):
|
|
{% include 'components/ui/card.html' with title='Title' %}
|
|
{% block card_content %}
|
|
Complex content here
|
|
{% endblock %}
|
|
|
|
Parameters:
|
|
- title: Card title text
|
|
- description: Card subtitle/description text
|
|
- header_content: HTML content for the header area (sanitized)
|
|
- content: Main content (sanitized)
|
|
- body_content: Alias for content (sanitized)
|
|
- footer_content: Footer content (sanitized)
|
|
- footer: Alias for footer_content (sanitized)
|
|
- header: Alias for header_content (sanitized)
|
|
- class: Additional CSS classes for the card container
|
|
- id: Element ID
|
|
|
|
Security: All content variables are sanitized using the sanitize filter to prevent XSS attacks.
|
|
Only trusted HTML elements and attributes are allowed.
|
|
{% endcomment %}
|
|
|
|
{% load safe_html %}
|
|
|
|
<div
|
|
{% if id %}id="{{ id }}"{% endif %}
|
|
class="rounded-lg border bg-card text-card-foreground shadow-sm {{ class|default:'' }}">
|
|
|
|
{# Header Section #}
|
|
{% if title or description or header_content or header %}
|
|
<div class="flex flex-col space-y-1.5 p-6">
|
|
{% if title %}
|
|
<h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
|
|
{% endif %}
|
|
|
|
{% if description %}
|
|
<p class="text-sm text-muted-foreground">{{ description }}</p>
|
|
{% endif %}
|
|
|
|
{% if header_content %}
|
|
{{ header_content|sanitize }}
|
|
{% elif header %}
|
|
{{ header|sanitize }}
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Content Section #}
|
|
{% if content or body_content %}
|
|
<div class="p-6 pt-0">
|
|
{% if content %}
|
|
{{ content|sanitize }}
|
|
{% endif %}
|
|
{% if body_content %}
|
|
{{ body_content|sanitize }}
|
|
{% endif %}
|
|
{% block card_content %}{% endblock %}
|
|
</div>
|
|
{% else %}
|
|
{# Allow block content even without content parameter #}
|
|
<div class="p-6 pt-0">
|
|
{% block card_content_fallback %}{% endblock %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Footer Section #}
|
|
{% if footer_content or footer %}
|
|
<div class="flex items-center p-6 pt-0">
|
|
{% if footer_content %}
|
|
{{ footer_content|sanitize }}
|
|
{% elif footer %}
|
|
{{ footer|sanitize }}
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|