Karten Widgets
Karten sind Container für zusammengehörige Inhalte. Sie strukturieren deine App und gruppieren Informationen visuell.
Übersicht
Section titled “Übersicht”| Karten-Typ | Charakteristik | Verwendung |
|---|---|---|
| Basic Card | Flexibel | Allgemeine Inhalte |
| Elevated Card | Starker Schatten | Wichtige Inhalte, die hervorstechen |
| Outlined Card | Rahmen ohne Schatten | Listen, Galerien, flaches Design |
Basic Card
Section titled “Basic Card”Der vielseitigste Karten-Typ mit voller Kontrolle über alle Eigenschaften.
Vorschau
Section titled “Vorschau”Die Vorschau zeigt eine Beispielkarte mit:
- Icon
- Titel
- Beschreibungstext
Du kannst zwischen Light und Dark Mode wechseln.
Aussehen (Appearance)
Section titled “Aussehen (Appearance)”Farben (je Light/Dark Mode)
Section titled “Farben (je Light/Dark Mode)”| Einstellung | Beschreibung |
|---|---|
| Hintergrundfarbe | Füllfarbe der Karte |
| Rahmenfarbe | Farbe des Randes |
Rahmen
Section titled “Rahmen”| Einstellung | Bereich | Beschreibung |
|---|---|---|
| Rahmenbreite | 0-4 px | Dicke des Randes (0 = kein Rahmen) |
Schatten (je Light/Dark Mode)
Section titled “Schatten (je Light/Dark Mode)”| Einstellung | Bereich | Beschreibung |
|---|---|---|
| Schattenfarbe | - | Farbe des Schattens |
| Schatten-Elevation | 0-24 | Grundhöhe (0 = kein Schatten) |
| Blur Radius | 0-32 px | Weichheit des Schattens |
| Spread Radius | -8 bis 16 px | Ausbreitung |
| Offset X | -16 bis 16 px | Horizontale Verschiebung |
| Offset Y | -16 bis 16 px | Vertikale Verschiebung |
Layout
Section titled “Layout”Eckenradien
Section titled “Eckenradien”Jede Ecke kann individuell eingestellt werden:
| Einstellung | Bereich | Beschreibung |
|---|---|---|
| Oben links | 0-32 px | Radius der oberen linken Ecke |
| Oben rechts | 0-32 px | Radius der oberen rechten Ecke |
| Unten links | 0-32 px | Radius der unteren linken Ecke |
| Unten rechts | 0-32 px | Radius der unteren rechten Ecke |
Padding (Innenabstand)
Section titled “Padding (Innenabstand)”| Einstellung | Bereich | Beschreibung |
|---|---|---|
| Oben | 0-48 px | Abstand zum oberen Rand |
| Rechts | 0-48 px | Abstand zum rechten Rand |
| Unten | 0-48 px | Abstand zum unteren Rand |
| Links | 0-48 px | Abstand zum linken Rand |
Margin (Außenabstand)
Section titled “Margin (Außenabstand)”| Einstellung | Bereich | Beschreibung |
|---|---|---|
| Oben | 0-48 px | Abstand nach oben |
| Rechts | 0-48 px | Abstand nach rechts |
| Unten | 0-48 px | Abstand nach unten |
| Links | 0-48 px | Abstand nach links |
Zustände (States)
Section titled “Zustände (States)”Der States-Tab zeigt Informationen über zukünftige Features:
- Hover-Zustand
- Pressed-Zustand
- Fokus-Zustand
Aktuell werden Karten-Zustände über die App-Logik gesteuert.
Erweitert (Advanced)
Section titled “Erweitert (Advanced)”| Einstellung | Optionen | Beschreibung |
|---|---|---|
| Clip-Verhalten | None, HardEdge, AntiAlias | Wie Inhalte am Rand abgeschnitten werden |
Clip-Verhalten erklärt:
- None: Inhalte können über den Rand hinausragen
- HardEdge: Scharfes Abschneiden (performant)
- AntiAlias: Weiches Abschneiden (schönere Kanten)
Elevated Card
Section titled “Elevated Card”Karte mit betontem Schatten für wichtige Inhalte.
Unterschied zur Basic Card
Section titled “Unterschied zur Basic Card”Die Elevated Card hat standardmäßig:
- Höhere Elevation
- Stärkeren Schatten
- Keinen Rahmen
Einstellungen
Section titled “Einstellungen”Alle Einstellungen entsprechen der Basic Card. Die Standardwerte unterscheiden sich:
| Einstellung | Basic Card | Elevated Card |
|---|---|---|
| Elevation | 0-4 | 6-12 |
| Rahmenbreite | 0-1 px | 0 px |
| Blur Radius | 4-8 | 12-16 |
Outlined Card
Section titled “Outlined Card”Karte mit Rahmen statt Schatten - ideal für flaches Design.
Unterschied zur Basic Card
Section titled “Unterschied zur Basic Card”Die Outlined Card hat standardmäßig:
- Keinen Schatten (Elevation 0)
- Sichtbaren Rahmen
- Flaches Erscheinungsbild
Einstellungen
Section titled “Einstellungen”Alle Einstellungen entsprechen der Basic Card. Die Standardwerte unterscheiden sich:
| Einstellung | Basic Card | Outlined Card |
|---|---|---|
| Elevation | 0-4 | 0 |
| Rahmenbreite | 0-1 px | 1-2 px |
| Rahmenfarbe | transparent | sichtbar |
Anwendungsfälle
Section titled “Anwendungsfälle”Wann welche Karte verwenden?
Section titled “Wann welche Karte verwenden?”| Situation | Empfohlener Typ |
|---|---|
| Feed-Beiträge | Basic oder Elevated |
| Produktkarten | Elevated (wichtig) |
| Einstellungen-Liste | Outlined |
| Dashboard-Widgets | Basic oder Elevated |
| Galerie-Elemente | Outlined |
| Profil-Karten | Elevated |
| Listen mit vielen Elementen | Outlined (reduziert visuelles Rauschen) |
Konsistenz
Section titled “Konsistenz”Verwende möglichst einen Karten-Typ pro Bereich:
- Alle Beiträge im Feed = gleicher Typ
- Alle Produkte = gleicher Typ
Mische Typen nur bewusst zur Hierarchie:
- Wichtige Karte = Elevated
- Normale Karten = Basic oder Outlined
Light Mode vs. Dark Mode
Section titled “Light Mode vs. Dark Mode”Karten profitieren besonders von separaten Dark Mode Einstellungen:
Light Mode
Section titled “Light Mode”- Hellerer Hintergrund als die Seite
- Subtiler Schatten
- Rahmen oft nicht nötig
Dark Mode
Section titled “Dark Mode”- Leicht hellerer Hintergrund als die Seite
- Schatten oft weniger sichtbar
- Rahmen kann helfen, Karten abzugrenzen
Häufige Fragen
Section titled “Häufige Fragen”Wie erstelle ich eine Karte ohne sichtbaren Rand?
Section titled “Wie erstelle ich eine Karte ohne sichtbaren Rand?”Setze die Rahmenbreite auf 0 und nutze nur den Schatten zur Abgrenzung.
Kann ich Karten mit Farbverlauf erstellen?
Section titled “Kann ich Karten mit Farbverlauf erstellen?”Karten-Hintergründe unterstützen aktuell nur Vollfarben. Für Verläufe kannst du innerhalb der Karte ein Container-Widget mit Gradient platzieren.
Warum sieht mein Schatten im Dark Mode nicht gut aus?
Section titled “Warum sieht mein Schatten im Dark Mode nicht gut aus?”Dunkle Schatten auf dunklem Hintergrund sind wenig sichtbar. Optionen:
- Hellere Schattenfarbe (z.B. sehr dunkles Grau statt Schwarz)
- Subtilen Rahmen hinzufügen
- Leicht erhellten Kartenhintergrund
Wie mache ich Karten klickbar?
Section titled “Wie mache ich Karten klickbar?”Das Klickverhalten wird im Page Builder definiert, nicht in der Theme Suite. Die Theme Suite definiert nur das Aussehen.