Action card
Markup canonic · components/action-card.json
Emite o factură nouă
Anatomia · antet → conținut → acțiune
Un .card.cta cu sloturile cardului. Geometria e a componentei, nu a fiecărui card: același padding, același titlu, același buton — de aceea, într-un rând de carduri, butoanele stau pe aceeași linie orice ar ține corpurile. Formalizat din Dublin (shared/dublin-ui/action-card.tsx), la valorile lui măsurate.
┌─ .card.cta (.tonal | alb | .dark) ───────┐ │ 24px padding, pe toate laturile │ │ ┌─ .card-title ──────────────────────────┐│ 14 / 20 · 600 — mărimea etichetei de buton │ └────────────────────────────────────────┘│ │ 16px (regula de frați a sloturilor) │ │ ┌─ .card-body ───────────────────────────┐│ flex: 1 — crește; conținutul sus, │ │ ││ .center sau .end │ │ conținutul instanței ││ │ └────────────────────────────────────────┘│ │ 16px (al corpului) │ │ ┌─ .btn.full ────────────────────────────┐│ 40px, ultimul copil │ └────────────────────────────────────────┘│ — sau .card-ft: .btn.full + .btn.outline.icon-only │ 24px padding │ └───────────────────────────────────────────┘
În Dublin · rândul de acțiuni de pe Acasă
Trei carduri, o grilă. Suprafața urmează conținutul (Card): inputuri → .tonal, o cifră de plată → .dark cu titlu conturat, un uploader singur → alb. Corpurile diferă, butoanele nu se mișcă.
Emite o factură nouă
Taxe și impozite de plată
Încarcă bon, factură sau extras
Diferențe de conținut care rămân ale lui Dublin, nu ale cardului: cifra de taxe e un .tn28 pus la 32px, zona de încărcare e o treaptă mai mică decât .uploader-zone și umple corpul, iar moneda e un .select-trigger.sm.bare în addon. Aici apar în forma lor din DS.
Acțiunea secundară · buton plin + buton-icon
Opțională, una singură. Cele două butoane stau în .card-ft: butonul plin umple rândul, iar un .btn.outline.icon-only de 40px stă la 8px în dreapta lui. În .card.cta subsolul pierde linia de sus și rămâne pe aceeași linie de bază ca un buton singur — în rândul de mai jos, cardul alb n-are acțiune secundară și butoanele tot sunt aliniate. Pe .dark conturul trece pe alb (.card.dark .btn.outline).
Emite o factură nouă
Taxe și impozite de plată
Raport lunar
Tonuri × titlu · simplu sau conturat
Trei suprafețe, două titluri — orice ton ia orice titlu. Titlul conturat e .card-title.outlined cu un <span class="dot"> în față: o pilulă pe hairline-ul cardului (alb @ 14% pe .dark) și punctul roz de 5px al DS-ului. Inputurile apar doar pe tonurile deschise: un card cu inputuri e .tonal.
white · plain
Text secundar, pe culoarea lui de card.
tonal · plain
Text secundar, pe culoarea lui de card.
dark · outlined
Text secundar, alb @ 65%.
white · outlined
Text secundar, pe culoarea lui de card.
tonal · outlined
Text secundar, pe culoarea lui de card.
dark · plain
Text secundar, alb @ 65%.
Conținutul · sus, centru, jos
Corpul crește cât îi lasă titlul și butonul, iar conținutul își alege locul în el: sus (implicit), .card-body.center sau .card-body.end. Un conținut care trebuie să umple corpul (o zonă de drop) ia el flex: 1. Rândul de aici are 240px, ca să se vadă spațiul liber.
.card-body
.card-body.center
.card-body.end
Stări
Cardul nu e interactiv — doar butoanele lui. Acțiunea principală urmează .btn:disabled (opacitate 0.4): un card-formular rămâne dezactivat până se completează câmpurile, iar formularul din corp leagă butonul cu atributul form.
Emite o factură nouă
Linia butoanelor · ce o ține și ce o rupe
Fiecare card din rând are aceeași înălțime (grila îl întinde), același padding de jos (24px), același buton (40px), iar butonul e mereu ultimul și lipit de bază. Deci marginile lui de sus și de jos stau la 24px și 64px de baza rândului, orice ar ține corpurile.
Un buton de altă mărime (.lg, .sm), orice conținut după buton, un padding sau o mărime pe card (.card.sm, style), un card pus în afara rândului comun, sau o grilă cu align-items: start.
Cardurile se stivuiesc, fiecare la înălțimea lui, iar linia nu mai e o regulă — nu mai are cu ce să se alinieze.
Perechea „card implicit → .btn.lg" din templates/card.html e a cardurilor de pricing. Pe un action card, la toată lățimea cardului, treapta de 44px citea supradimensionat: butonul e .btn de 40px.