Composants - CCB Design System V2 - CCB Design System V2

Badges

Badges Colorés

Primary Secondary Success Warning Danger Info Light Dark

Badges avec Icônes

VIP Vérifié En attente Rejeté

Badges dans un Contexte

Notifications 12

Messages 5

Tâches complétées 89%

<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>

Alertes

Information

Ceci est une alerte d'information pour communiquer des détails importants.

Succès !

Votre action a été effectuée avec succès.

Attention

Cette action nécessite votre attention avant de continuer.

Erreur

Une erreur s'est produite. Veuillez réessayer.

<div class="alert alert-success">
    <i class="fas fa-check-circle"></i>
    <div class="alert-content">
        <div class="alert-title">Succès</div>
        Message de succès...
    </div>
</div>

Pagination

Pagination Standard

1
2
3
4
5

Pagination avec Ellipsis

1
2
3
...
10

<ul class="pagination">
    <li class="page-item active">
        <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item">
        <a class="page-link" href="#">2</a>
    </li>
</ul>

Fil d'Ariane (Breadcrumbs)

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Accueil</a></li>
        <li class="breadcrumb-item active">Page</li>
    </ol>
</nav>

Onglets (Tabs)

Onglet Général

Contenu de l'onglet général. Ici vous pouvez afficher des informations générales.

Onglet Profil

Contenu du profil utilisateur avec détails et paramètres.

Onglet Paramètres

Configuration et préférences de l'application.

Onglet Notifications

Gérer vos notifications et alertes.

<div class="tabs">
    <div class="tab-list">
        <button class="tab-item active" data-tab="tab1">Tab 1</button>
        <button class="tab-item" data-tab="tab2">Tab 2</button>
    </div>
    <div class="tab-content active" id="tab1">Contenu 1</div>
    <div class="tab-content" id="tab2">Contenu 2</div>
</div>

Barres de Progression

Progression Standard

25%

50%

75%

Progression Animée

Chargement...

Progression Multiple

30%

20%

15%

<div class="progress">
    <div class="progress-bar" style="width: 50%;">50%</div>
</div>

Indicateurs de Chargement

Spinners

Spinners dans Boutons

<div class="spinner"></div>

<!-- Personnalisé -->
<div class="spinner" style="
    --spinner-size: 32px; 
    --spinner-color: var(--success);">
</div>

Info-bulles (Tooltips)

Survolez les éléments ci-dessous pour voir les tooltips :

<button data-tooltip="Texte du tooltip" 
    data-tooltip-position="top">
    Survoler
</button>

Modals (Fenêtres Modales)

Cliquez sur les boutons pour ouvrir différents types de modals :

<div class="modal" id="myModal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Titre</h3>
            <button class="modal-close">×</button>
        </div>
        <div class="modal-body">Contenu...</div>
        <div class="modal-footer">
            <button class="btn btn-primary">OK</button>
        </div>
    </div>
</div>

Notifications Toast

Cliquez sur les boutons pour afficher des notifications toast :

// JavaScript
showToast('Titre', 'Message', 'success');

Séparateurs (Dividers)

Contenu avant le séparateur

Contenu après le séparateur standard

Séparateur en pointillés

OU

Séparateur avec texte centré

<hr class="divider">
<hr class="divider divider-dashed">
<div class="divider divider-text">OU</div>

Avatars

Tailles d'Avatar

Groupe d'Avatars

+5

<img src="..." class="avatar">
<img src="..." class="avatar avatar-lg">

<div class="avatar-group">
    <img src="..." class="avatar">
    <img src="..." class="avatar">
</div>

Composants Divers