FORMA Docs

Dash card

Eine hohe Dashboard-Karte: oben etwas zum Ansehen (Icon, Gauge, Aktionen, Chart), unten Zahl, Titel und Zeile; als Fläche oder in der Markenfarbe, auf Wunsch ein Link.

import { DashCard, ScoreGauge, ActionList } from "@/forma/data/dash-card";
Base

In FORMA

  • Liegt in kit/data/dash-card.tsx und ist über @/forma/data/dash-card erreichbar.
  • FORMAs eigener Baustein, auf Arc gebaut: Arcs Buttons, Felder und Federn darunter, Farbe, Ecken, Höhen und Tempo aus der Richtung.

Usage

import { DashCard, ScoreGauge, ActionList } from "@/forma/data/dash-card";

Dieselbe Karte trägt ganz verschiedene Inhalte – der obere Bereich (visual) ist frei:

  • Nächster Schritt: tone="brand", ein Icon, die Zeit bis dahin als Zahl (Termin, Lieferung, Deadline).
  • Bewertung: eine ScoreGauge oben, der Wert als Zahl (Zufriedenheit, Qualität, Auslastung).
  • Anzahl mit Veränderung: ein Icon, die Zahl mit delta (Abschlüsse, Tickets, Anmeldungen).
  • Aktionen: eine ActionList oben, ohne Zahl (Schnellzugriffe, Tipps, Onboarding-Schritte, zuletzt geöffnet).
  • Ebenso eine Sparkline, ein Avatar-Stapel oder ein Bild.

API reference

PropTypeDefaultDescription
tone"surface" | "brand""surface"Fläche, oder gefüllt mit der Primärfarbe (Text in ihrer Paarfarbe)
visualReactNode–was oben sitzt: Icon, Gauge, Aktionen, Chart
valueReactNode–die Zahl
delta{ text, good? }–Veränderung neben der Zahl; good: false färbt sie rot
titlestring–Titel
captionstring–Zeile darunter, z. B. Zeitraum
href / onClick–macht die Karte zum Link oder Button und zeigt den Pfeil
heightnumber322Höhe der Karte

Motion

  • Beim Überfahren hebt sich die Karte um 2 px und der Pfeil rückt nach rechts – auf Arcs snappy spring; reduzierte Bewegung lässt beides weg.

Herkunft

  • Verallgemeinert aus den Übersichtskarten des Xaver Broker Cockpit (Figma), auf FORMA gebaut: Radius, Farben, Schatten und Tempo aus der Richtung.
ZurückUsage cardWeiterScore gauge

Komponente und Text: Arc UI (MIT, uiarc.dev), angepasst für FORMA.