Karten Widgets
Karten sind Container für zusammengehörige Inhalte. Sie strukturieren deine App und gruppieren Informationen visuell.
Übersicht
Abschnitt betitelt „Ü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
Abschnitt betitelt „Basic Card“Der vielseitigste Karten-Typ mit voller Kontrolle über alle Eigenschaften.
Vorschau
Abschnitt betitelt „Vorschau“Die Vorschau zeigt eine Beispielkarte mit:
- Icon
- Titel
- Beschreibungstext
Du kannst zwischen Light und Dark Mode wechseln.
Aussehen (Appearance)
Abschnitt betitelt „Aussehen (Appearance)“Farben (je Light/Dark Mode)
Abschnitt betitelt „Farben (je Light/Dark Mode)“| Einstellung | Beschreibung |
|---|---|
| Hintergrundfarbe | Füllfarbe der Karte |
| Rahmenfarbe | Farbe des Randes |
| Einstellung | Bereich | Beschreibung |
|---|---|---|
| Rahmenbreite | 0-4 px | Dicke des Randes (0 = kein Rahmen) |
Schatten (je Light/Dark Mode)
Abschnitt betitelt „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 |
Eckenradien
Abschnitt betitelt „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)
Abschnitt betitelt „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)
Abschnitt betitelt „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)
Abschnitt betitelt „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)
Abschnitt betitelt „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
Abschnitt betitelt „Elevated Card“Karte mit betontem Schatten für wichtige Inhalte.
Unterschied zur Basic Card
Abschnitt betitelt „Unterschied zur Basic Card“Die Elevated Card hat standardmäßig:
- Höhere Elevation
- Stärkeren Schatten
- Keinen Rahmen
Einstellungen
Abschnitt betitelt „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
Abschnitt betitelt „Outlined Card“Karte mit Rahmen statt Schatten - ideal für flaches Design.
Unterschied zur Basic Card
Abschnitt betitelt „Unterschied zur Basic Card“Die Outlined Card hat standardmäßig:
- Keinen Schatten (Elevation 0)
- Sichtbaren Rahmen
- Flaches Erscheinungsbild
Einstellungen
Abschnitt betitelt „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
Abschnitt betitelt „Anwendungsfälle“Wann welche Karte verwenden?
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „Light Mode vs. Dark Mode“Karten profitieren besonders von separaten Dark Mode Einstellungen:
Light Mode
Abschnitt betitelt „Light Mode“- Hellerer Hintergrund als die Seite
- Subtiler Schatten
- Rahmen oft nicht nötig
Dark Mode
Abschnitt betitelt „Dark Mode“- Leicht hellerer Hintergrund als die Seite
- Schatten oft weniger sichtbar
- Rahmen kann helfen, Karten abzugrenzen
Häufige Fragen
Abschnitt betitelt „Häufige Fragen“Wie erstelle ich eine Karte ohne sichtbaren Rand?
Abschnitt betitelt „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?
Abschnitt betitelt „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?
Abschnitt betitelt „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?
Abschnitt betitelt „Wie mache ich Karten klickbar?“Das Klickverhalten wird im Page Builder definiert, nicht in der Theme Suite. Die Theme Suite definiert nur das Aussehen.