Card

Trei suprafețe (white / tonal / dark) × două mărimi (default / .sm) × trei variante CTA (primary / secondary / outline-pink). Plus regulile de border, shadow și buton full-width.

White card

Pe bej-0. Folosit pentru conținut text/cifre. Border hairline obligatoriu.

background: bej-1 (simulează contextul Dublin)

Secțiune

Titlu card

Descriere scurtă. Text neutral, fără exclamări.

Secțiune

Alt card

Text cu acțiune la final. Butonul se lipește de baza cardului și ocupă toată lățimea.

Tonal card

Bej-1 pe bej-0. Fără border. Folosit pentru action cards (host pentru inputs/forms).

background: white (simulează contextul page)

Variante CTA — 2 mărimi × 3 butoane

Combinațiile recomandate de card + buton. Mărimea cardului dictează mărimea butonului: .card default folosește .btn.lg; .card.sm folosește .btn (md). Butonul: primary pentru CTA dominant, secondary pentru acțiune secundară, outline-pink pentru emphasis brand subtil.

Standard — card default (padding 24) + btn lg (44h)

Primary

CTA dominant

Acțiunea principală a cardului. Max 1 pe ecran.

Secondary

Acțiune secundară

Când e o opțiune dintre mai multe — nu trage atenția peste primary.

Outline pink

Brand subtil

Accent brand fără să devină dominant. Bun pe pricing card non-featured.

Compact — card.sm (padding 18) + btn md (40h)

Primary

CTA dominant

Card compact — listă densă, sidebar widgets.

Secondary

Acțiune secundară

Opțiune alternativă, gestiune.

Outline pink

Brand subtil

Accent brand discret.

Cum alegi butonul:
  • Primary — CTA dominant. Max 1 buton primary pe ecran (sec. 7.1).
  • Secondary — bg bej-1, acțiune secundară. Pe carduri cu mai multe opțiuni egale (ex: 3 cards de pricing, primul featured cu primary, restul cu secondary).
  • Outline pink — bg alb cu inset border pink. Brand-emphasis dar mai discret decât primary. Bun pentru CTA pe carduri tonale sau pricing non-featured.

Dark card

Suprafață întunecată. Folosit pentru scadențe critice, CTA bold, TVA cards.

Scadență TVA

3.240 Lei

Termen: 25 Mai 2026

Review card

Card cu header (titlu + acțiune outline) și rânduri label muted ↔ valoare tabular. Folosit pe pași de review unde utilizatorul confirmă datele înainte de submit. Form-ul de modificare e colapsabil în .card-edit, ascuns by default cu atributul hidden.

Display mode — header + rânduri
.card > .card-hd + .card-row × n

Date contract

Tip contractCIM
FuncțieDirector
Salariu brut4.050 Lei
Data începerii1 iunie 2026
Edit mode — form colapsabil deschis
.card-edit (border-top hairline) + .card-actions

Date contract

Tip contractCIM
FuncțieDirector
Salariu brut4.050 Lei
Data începerii1 iunie 2026
Minim 4.050 Lei.
Modificările se aplică doar la confirmare. Salariul net este recalculat automat.
Review-only — fără acțiune în header
.card > .card-hd (doar titlu) + .card-row × n

Alegerile tale

PlanActiv
Frecvență platăLunar
Total189 Lei
Anatomie:
  • .card-hd — titlu (h3.t18) + acțiune opțională la dreapta (recomandat .btn.outline-pink.sm).
  • .card-row — label muted (.t14, default fog) ↔ valoare tabular (.t14.card-val). Border-bottom hairline; ultimul rând fără.
  • .card-edit — form colapsabil cu border-top hairline. Ascuns by default cu attr hidden; toggle prin click pe „Modifică".
  • .card-actions — rândul de butoane Save/Cancel la baza formului.

Reguli de folosire

Card cu inputs / acțiuni → bej-1, fără border
Card cu text / cifre → white, border 1px ink @ 12%
Card CTA / TVA → dark, fără border
Card cu CTA — pattern din references (.price în Landing, .da-act.tva-due în Dublin):
  • Adaugă .cta pe card → devine flex-column, butonul se lipește de bază cu margin-top:auto.
  • Adaugă .full pe buton → ocupă toată lățimea cardului.
  • Default size: .btn.primary.lg (44h · fs16 · r24) pentru CTA principal pe card.
Fără shadow pe carduri default. Fără hover lift. Border-ul pe hover devine color-mix(in oklab, var(--c-pink) 30%, var(--c-rule)).