Flip Card Karten

Die flip_card Komponente zeigt auf ihrer Rückseite zusätzliche Inhalte an. Beim Klick auf die Schaltfläche zum Umdrehen, dreht sich die Karte um 180°, um weitere Informationen anzuzeigen.

Neu
WCAG AA
WCAG AAA

Funktionen

  • 3D-Flip-Animation: Fließender Rotationseffekt.

  • Inhalt auf Vorder- und Rückseite: Titel, Inhalt und Aktionen für jede Seite separat.

  • Tags: Badges auf der Vorderseite.

  • Platzsparend: Zeigt mehr Inhalte an, ohne zusätzlichen Platz zu beanspruchen.

HTML

Verwendung

Die Komponente wird über das flip_card Tag eingebunden.

{% load insight_tags %} {% flip_card config=card_config %} <!-- or with inline parameters --> {% flip_card title="Product" content="Short description" back_title="Details" back_content="Extended info" %}

Parameter

Laden…

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

Inhalt auf der Vorderseite.

 None True
back_title str

Titel auf der Rückseite.

 "" False
back_content str

Inhalt auf der Rückseite.

 "" False
back_actions

Buttons auf der Rückseite.

 [] False
request_url str

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

 "" False
image

Bild der Vorderseite.

 None False
tags

Liste der badge Konfigurationen für Tags.

 [] False
actions list[ButtonConfig
]

Buttons auf der Vorderseite.

 [] False
FlipCardConfig( title="Product Name", content="Short description on the front.", back_title="Details", back_content="Extended product information and specs.", back_actions=[ButtonConfig(label="Contact", request_url="/contact/", type="outline-primary")], image=ImageConfig(url="img/product.png", alt="Product"), tags=[BadgeConfig(label="Sale", type="danger"), BadgeConfig(label="-20%", type="warning")], actions=[ButtonConfig(label="Buy", request_url="/buy/", type="primary")], )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

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

  • Das Umschalten wird über eine Schaltfläche ausgelöst, sodass es vollständig über die Tastatur bedienbar ist (Enter/Leertaste).

  • Auf der inaktiven Seite wird aria-hidden='true' verwendet, um zu verhindern, dass Screenreader versteckte Inhalte vorlesen.

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

WCAG AAA (Erweitert)

  • Nach Abschluss der Animation wechselt der Fokus auf die Umschaltfläche der sichtbaren Seite.

Verwandte Themen