App Card Karten

Die app_card Komponente zeigt Elemente in einem vertikal ausgerichteten Kartenlayout an. Sie ist für Übersichtsseiten konzipiert, auf denen Apps, Produkte, Demos oder ähnliche Elemente vorgestellt werden.

WCAG AA

Funktionen

  • Quadratisches Bild: Großes Bild oben auf der Karte.

  • Tags: Badges zur Kategorisierung.

  • Anklickbarer Titel: Optionaler Link im Titel.

  • Aktionsschaltflächen: Konfigurierbare Schaltflächen am unteren Rand.

HTML

Verwendung

Die Komponente wird über das app_card Tag eingebunden.

{% load insight_tags %} {% app_card config=card_config %} <!-- or --> {% app_card title="Insight UI" content="Django UI Framework for ..." request_url="/insight-ui/" %}

Parameter

Laden…

config (AppCardConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
title str

Titel der Karte.

 None True
content str

Kartenbeschreibung.

 None True
request_url str

Die URL, die aufgerufen werden soll, wenn auf den Titel geklickt wird.

 "" False
image

Kartenbild (oben quadratisch dargestellt).

 None False
tags

Liste der badge Konfigurationen für Tags.

 [] False
actions

Liste der Buttons.

 [] False
AppCardConfig( title="Analytics Dashboard", content="Real-time metrics and insights.", request_url="/apps/analytics/", image=ImageConfig(url="img/analytics.png", alt="Analytics"), tags=[BadgeConfig(label="New", type="success"), BadgeConfig(label="Featured", type="primary")], actions=[ButtonConfig(label="Open", request_url="/apps/analytics/", type="primary")], )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Titel der Karte verwendet eine semantische Überschrift vom Typ <h3> für die Navigation mit Screenreadern.

  • Bilder enthalten ein alt-Attribut für Beschreibungen durch Screenreader.

  • Deaktivierte Aktionen verwenden aria-disabled='true', um ihren Status anzuzeigen.

  • Externe Links verwenden aus Sicherheitsgründen rel='noopener'.

Verwandte Themen