Cards - CCB Design System V2 - CCB Design System

Card Standard

Titre de la Card

Sous-titre optionnel

Ceci est le contenu principal de la card. Vous pouvez y mettre du texte, des images, des boutons, ou tout autre contenu HTML.

Dernière mise à jour: Il y a 2 heures

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Titre</h3>
    </div>
    <div class="card-body">
        <p class="card-text">Contenu</p>
    </div>
    <div class="card-footer">Footer</div>
</div>

Variantes de Cards

Card Simple

Card avec body uniquement, sans header ni footer.

Card Bordered

Card avec bordure visible et sans ombre.

Card Flat

Card sans ombre, apparence plate.

Effets au Survol

Hover Standard

Ombre plus prononcée et légère élévation au survol.

Hover Lift

Élévation plus importante pour un effet "soulevé".

Cards Colorées

Primary (Orange)

Card avec gradient orange CCB.

Secondary (Bleu)

Card avec gradient bleu CCB.

Success

Card pour indiquer un succès.

Danger

Card pour les alertes importantes.

Cards avec Bordure Colorée

Priorité Haute

Card avec bordure gauche orange pour attirer l'attention.

Complété

Card avec bordure verte pour indiquer un statut positif.

Attention

Card avec bordure rouge pour les avertissements.

Cards de Statistiques

1,234

Utilisateurs

+12.5%

567

Documents

+8.3%

89%

Taux de succès

+2.1%

23

Erreurs

-15.2%

Card Profil

Jean Dupont

Développeur Full Stack

Passionné par les technologies web modernes et l'UX design.

245 Projets

1.2K Followers

320 Following

Cards Projet

Rénovation Centre-Ville

Projet de rénovation complète du quartier historique avec mise aux normes des bâtiments existants.

En cours Échéance: 2025

12 intervenants

Pont de la Coulouvrenière

Réfection complète du pont historique avec amélioration de la sécurité et accessibilité.

Planifié Échéance: 2026

8 intervenants

Éco-quartier des Eaux-Vives

Développement durable d'un nouveau quartier résidentiel avec bâtiments basse consommation.

Terminé Livré en 2024

15 intervenants

<div class="card">
    <img src="~/images/project-image.jpg" alt="Project" class="card-img-top">
    <div class="card-body">
        <h3 class="card-title">Project Title</h3>
        <p class="card-text">Project description</p>
        <div class="card-meta">
            <span class="badge badge-primary">Status</span>
        </div>
    </div>
    <div class="card-footer">
        <div class="card-footer-content">
            <div class="card-footer-left">
                <small class="text-muted">Metadata</small>
            </div>
            <div class="card-footer-right">
                <button class="btn btn-sm btn-outline-primary">Action</button>
            </div>
        </div>
    </div>
</div>

Cards Fonctionnalités

Calculs Automatiques

Calculs de cotisations et de prestations automatisés selon la législation en vigueur.

Déclarations Simplifiées

Interface intuitive pour soumettre vos déclarations de salaires et de travaux.

Tableaux de Bord

Suivi en temps réel de vos cotisations, prestations et échéances importantes.

<div class="card card-feature text-center">
    <div class="card-body">
        <div class="card-feature-icon" style="color: var(--ccb-orange);">
            <i class="fas fa-icon"></i>
        </div>
        <h3 class="card-title">Feature Title</h3>
        <p class="card-text">Feature description</p>
        <button class="btn btn-primary">Call to action</button>
    </div>
</div>

Cards Témoignages

"Le nouveau système de déclaration en ligne a considérablement simplifié nos démarches administratives. L'interface est intuitive et nous gagnons beaucoup de temps."

Marie Martin

Directrice RH, ConstructionPlus SA

"Les calculs automatiques nous assurent une conformité parfaite avec la législation. Plus besoin de vérifier manuellement chaque cotisation."

Pierre Dubois

Comptable, BâtirEnsemble

<div class="card card-testimonial">
    <div class="card-body">
        <div class="card-testimonial-quote">
            <i class="fas fa-quote-left"></i>
            <p class="card-text">"Testimonial text"</p>
        </div>
        <div class="card-testimonial-author">
            <img src="avatar.jpg" alt="Name" class="card-testimonial-avatar">
            <div class="card-testimonial-info">
                <div class="card-testimonial-name">Name</div>
                <div class="card-testimonial-role">Position, Company</div>
            </div>
        </div>
    </div>
</div>

Card Horizontale

Titre de la Card Horizontale

Cette card affiche l'image sur le côté gauche et le contenu sur le côté droit. Parfait pour les articles de blog, les produits, ou les profils avec photo.

L'image occupe 40% de la largeur et le contenu 60%, créant un équilibre visuel agréable.

Accordéon

Qu'est-ce que le CCB Design System V2 ?

Le CCB Design System V2 est un système de design moderne et modulaire créé pour la Caisse des Compensations du Bâtiment de Genève. Il fournit tous les outils nécessaires pour créer des interfaces cohérentes et accessibles.

Quels sont les avantages ?

Les avantages incluent une cohérence visuelle, une meilleure accessibilité, un développement plus rapide, et une maintenance facilitée grâce à l'architecture modulaire.

Comment l'utiliser ?

Consultez le Guide d'utilisation pour des instructions détaillées sur l'installation, la configuration et l'utilisation de tous les composants du système.

Cards avec Image

Construction Moderne

Exemple d'une card avec image en haut du contenu utilisant nos templates CCB.

Infrastructure Urbaine

Card avec image positionnée en bas du contenu pour un effet différent.

Présentation CCB

Texte superposé sur l'image avec nos templates officiels.

Bonnes Pratiques

Conseils pour les cards

Utilisez les cards pour grouper du contenu lié
Maintenez une hiérarchie visuelle claire (titre > sous-titre > contenu)
Ne surchargez pas les cards avec trop d'informations
Utilisez les card-actions pour les boutons en bas de card
Les effets hover indiquent que la card est cliquable/interactive
Respectez les espacements cohérents entre les cards