Corp Alpha — SAS spécialisée en solutions fintech
Cartes & Listes
Composants d'affichage en carte et en liste.
BcCard
Composant carte avec slots header, default et footer. Trois sous-types couvrent les cas d'usage métier courants ; un layout horizontal est disponible pour les documents et fichiers joints.
Sous-type 1 — Avec picto
Carte entité / personne morale : l'icône Bootstrap Icons dans le header identifie visuellement le type d'objet.
html
<BcCard>
<template #header>
<div class="bc-card-icon-circle"><i class="bi bi-building"></i></div>
</template>
<p>Corp Alpha — SAS spécialisée en solutions fintech</p>
<template #footer>
<span class="bc-mono text-sm">SIREN : 823 456 789</span>
<bc-badge variant="success">EN COURS</bc-badge>
</template>
</BcCard>Sous-type 2 — Avec badge header
Carte tâche / statut : un <bc-badge> en header signale l'état de la tâche sans surcharger le corps.
SETUP
Configuration de l'environnement de production requise.
html
<BcCard>
<template #header>
<bc-badge variant="primary">SETUP</bc-badge>
</template>
<p>Configuration de l'environnement de production requise.</p>
<template #footer>
<bc-button variant="ghost" size="sm">Modifier</bc-button>
<bc-button variant="ghost" size="sm">Tester</bc-button>
</template>
</BcCard>Sous-type 3 — Avec métrique display
Carte KPI / score : la valeur clé est mise en avant avec la classe bc-display et un token de couleur sémantique.
72/100
Score de risque calculé sur les 30 derniers jours.
html
<BcCard>
<template #header>
<span class="bc-display text-danger">72/100</span>
</template>
<p>Score de risque calculé sur les 30 derniers jours.</p>
<template #footer>
<bc-badge variant="warning">MODÉRÉ</bc-badge>
<span class="text-dim text-sm">Màj 28/02/2026</span>
</template>
</BcCard>Card horizontale
Layout flex-row via la prop layout="horizontal". Adapté aux pièces jointes, documents KYC et fichiers liés à un dossier.
Kbis — SAS Nextera
Document officiel d'immatriculation au RCS.
html
<BcCard layout="horizontal">
<template #header>
<div class="bc-card-icon-circle">
<i class="bi bi-file-earmark-text"></i>
</div>
</template>
<h5>Kbis — SAS Nextera</h5>
<p>Document officiel d'immatriculation au RCS.</p>
<template #footer>
<bc-badge variant="success">VALIDÉ</bc-badge>
<span class="text-dim text-sm">PDF · 1.2 Mo</span>
</template>
</BcCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
clickable | boolean | false | Rend la carte cliquable (rendu en <button>) |
layout | "vertical" | "horizontal" | "compact" | "vertical" | Disposition |
disabled | boolean | false | Desactive (si clickable) |
ariaLabel | string | — | Label ARIA (si clickable) |
Slots
| Slot | Description |
|---|---|
header | En-tête de la carte (picto, badge, métrique) |
default | Corps de la carte |
footer | Pied de la carte (actions, métadonnées) |
Classes utilitaires associées
| Classe | Usage |
|---|---|
bc-card-icon-circle | Conteneur centré pour une icône Bootstrap Icons (style pill) |
bc-card-icon | Conteneur icône sans bordure |
bc-display | Typo grande métrique (chiffre clé) |
bc-mono | Police monospace (SIREN, codes, références) |
text-dim | Couleur atténuée --bc-sub |
text-sm | Taille texte réduite |
Lien croisé : pour afficher des grilles de métriques KPI multiples dans un tableau de bord, voir BcStatGrid (BUG-P05).
BcListGroup
vue
<script setup>
const selectedItem = ref('')
const listItems = [
{ id: '1', label: 'Premier element', meta: 'Description' },
{ id: '2', label: 'Deuxieme element', meta: 'Description' },
{ id: '3', label: 'Troisieme element', meta: 'Description' },
]
</script>
<BcListGroup v-model="selectedItem" :items="listItems" />Flush
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ListItem[] | [] | Elements { id, label, meta? } |
modelValue | string | "" | ID de l'element selectionne (v-model) |
flush | boolean | false | Sans bordure exterieure |
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | string | Changement de selection |
select | ListItem | Element selectionne |