Card Karten

Die card Komponente zeigt Inhalte in einem Container im Seitenverhältnis 16:9 an. Sie besteht aus einem Titel, einem Inhalt, einem optionalen Bild und Aktionsschaltflächen.

WCAG AA

Funktionen

  • Seitenverhältnis 16:9: Layout im Visitenkartenstil.

  • Optionaler Untertitel: Unterüberschrift unterhalb des Titels.

  • Hintergrundbild: Optionale Bildanzeige.

  • Aktionsschaltflächen: Konfigurierbare Schaltflächen für Kartenaktionen.

HTML

Verwendung

Die Komponente wird über das card Tag eingebunden.

{% load insight_tags %} {% card config=card_config %} <!-- or --> {% card title="My Card" subtitle="More than just a card." content="Ok, it's actually just a card." %}

Parameter

Laden…

config (CardConfig 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

Hauptinhalt der Karte.

 None True
subtitle str

Optionaler Untertitel.

 "" False
image

Optionales Bild der Karte.

 None False
actions

Liste der Buttons.

 [] False
CardConfig( title="Welcome", subtitle="Getting Started", content="Learn how to use our platform.", actions=[ ButtonConfig(label="Learn More", request_url="/docs/", type="primary"), ], )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Karte verwendet das semantische Element <article> für in sich geschlossene Inhalte.

  • 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.

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

  • Buttons sind mit beschreibenden Textbeschriftungen versehen.

Verwandte Themen