FS Detail (Carte de détail structurée) ​

Pattern de présentation des informations détaillées d'un Financial Service Partner. Assemblage de composants existants (BcCard + lignes label/valeur + badges).

Démo ​

Corp Alpha
READY_TO_CONFIGURE
Raison socialeCorp Alpha SAS
SIREN823 456 789
Statut KYBIN_PROGRESS
Date création15/01/2026
Responsablea.lavon

Structure ​

Ce pattern est un assemblage de composants existants, pas un composant dédié :

vue
<BcCard>
  <template #header>
    <h5>{{ entity.name }}</h5>
    <bc-badge :variant="statusVariant">{{ entity.status }}</bc-badge>
  </template>

  <dl class="bc-detail-grid">
    <div v-for="field in fields" :key="field.key" class="bc-detail-row">
      <dt>{{ field.label }}</dt>
      <dd>
        <bc-badge v-if="field.badge" :variant="field.badge.variant">{{ field.value }}</bc-badge>
        <span v-else :class="{ 'bc-mono': field.mono }">{{ field.value }}</span>
      </dd>
    </div>
  </dl>
</BcCard>

CSS utilitaire .bc-detail-grid ​

css
.bc-detail-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0;
  margin: 0;
}
.bc-detail-row {
  display: contents;
}
.bc-detail-row dt {
  padding: 8px 0;
  color: var(--bc-sub);
  font-weight: 500;
  border-bottom: 1px solid var(--bc-edge);
}
.bc-detail-row dd {
  padding: 8px 0;
  border-bottom: 1px solid var(--bc-edge);
  margin: 0;
}