Composant · Disposition

FieldCard

Stable

Carte de groupe de champs : un en-tête titré avec pastille de commentaires optionnelle, et un corps libre. Trois variantes : bordered (filet sous l'en-tête), plain (cadre simple) et accent (liseré catégoriel à gauche, conteneur à angles nets).

Exemples

Les trois variantes, dont une avec pastille de commentaires interactive et une à liseré catégoriel.

Groupes de champs

12 rue des Lilas, Montréal

À relire avant validation.

Élevée : échéance proche.

Voir le code (Svelte)

<div class="card-demo-row">
  <FieldCard label="Coordonnées">
    <p class="field-demo-text">12 rue des Lilas, Montréal</p>
  </FieldCard>
  <FieldCard
    label="Notes"
    variant="plain"
    commentCount={3}
    onOpenComments={undefined}
  >
    <p class="field-demo-text">À relire avant validation.</p>
  </FieldCard>
  <FieldCard label="Priorité" variant="accent" tone="category3">
    <p class="field-demo-text">Élevée : échéance proche.</p>
  </FieldCard>
</div>

API du composant

Prop	Type	Défaut	Description
`label`	`string`	requis	Titre du groupe de champs.
`variant`	`"plain" \| "bordered" \| "accent"`	`"bordered"`	Variante visuelle.
`tone`	`FieldCardTone`	–	Couleur catégorielle du liseré (variante accent, category1…8).
`commentCount`	`number`	`0`	Nombre de commentaires affiché dans la pastille.
`onOpenComments`	`() => void`	–	Rend la pastille interactive et ouvre le fil.

Tokens CSS

Variable CSS	Description
`--st-component-card-background`	Fond de la carte (défaut : surface-raised).
`--st-component-card-border`	Couleur de la bordure (défaut : border-subtle).
`--st-semantic-data-category1…8`	Palette catégorielle du liseré accent.