Card

Style-agnostic card container using CSS custom properties.

template 0 required8 optional3 slots0 a11y rules

Reference Guide

Card Title

Card body content goes here.

Card footer

No Footer

A card without a footer.

A card with no title or footer.

Usage

views.py

from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.title = 'Card Title'

my_template.html

{% load theme_components %}
{% theme_card title=title footer='Card footer' %}

Props

Name	Type	Default
title	Optional[str]	—
content	str	—
footer	Optional[str]	—
css_prefix	str	—
attrs	dict	—
slot_header	str	—
slot_body	str	—
slot_footer	str	—

Slots

slot_header slot_body slot_footer

Source & styles

File	Path	Notes
template	djust_theming/components/card.html	Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
css	djust_theming/components.css	Defines 5 of this component's classes at line 226, 232, 243, 250, 254. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_components/components.css	Defines 5 of this component's classes at line 160, 165, 166, 168, 169. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/scaffold.css	Defines 4 of this component's classes at line 380, 388, 405, 409. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/catalogue.css	Defines 1 of this component's classes at line 122. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/performance.css	Defines 1 of this component's classes at line 37. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
css	djust_theming/print.css	Defines 1 of this component's classes at line 66. Override those rules, or the custom properties they read, in a stylesheet loaded after it.

CSS variables

--border --card --card-foreground --foreground --radius --shadow-sm --space-4 --space-5

Template source — card.html

<div class="{{ css_prefix }}card {% if attrs.class %}{{ attrs.class }}{% endif %}"
     {% if attrs.id %}id="{{ attrs.id }}"{% endif %}>
    {% if slot_header %}
    <div class="{{ css_prefix }}card-header">
        {{ slot_header|safe }}
    </div>
    {% elif title %}
    <div class="{{ css_prefix }}card-header">
        <h3 class="{{ css_prefix }}card-title">{{ title }}</h3>
    </div>
    {% endif %}
    <div class="{{ css_prefix }}card-body">
        {% if slot_body %}{{ slot_body|safe }}{% endif %}
    </div>
    {% if slot_footer %}
    <div class="{{ css_prefix }}card-footer">
        {{ slot_footer|safe }}
    </div>
    {% elif footer %}
    <div class="{{ css_prefix }}card-footer">
        {{ footer }}
    </div>
    {% endif %}
</div>