Cards

Conteneurs flexibles pour organiser et présenter du contenu.

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

Avatar
Jean Dupont
Développeur Full Stack

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

245 Projets
1.2K Followers
320 Following

Cards Tarification

Gratuit

CHF0 /mois
  • 5 utilisateurs
  • 10 GB stockage
  • Support email
  • API access
Populaire

Pro

CHF29 /mois
  • 50 utilisateurs
  • 100 GB stockage
  • Support prioritaire
  • API access

Enterprise

CHF99 /mois
  • Utilisateurs illimités
  • Stockage illimité
  • Support 24/7
  • API avancée

Card Horizontale

Image

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

Top

Image en Haut

Card avec image positionnée en haut du contenu.

Image en Bas

Card avec image positionnée en bas du contenu.

Bottom
Overlay

Image Overlay

Texte superposé sur l'image avec gradient.

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