Composants Divers

Collection de composants UI essentiels : badges, alerts, modals, tooltips et plus.

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 

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

Pagination

Pagination Standard

Pagination avec Ellipsis

<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)

Breadcrumb Standard (sans icônes)

Breadcrumb avec Icônes

@await Component.InvokeAsync("Breadcrumb", new {
    items = new[] {
        new { Text = "Accueil", Href = "/", Active = false },
        new { Text = "Page", Href = "", Active = true }
    },
    showIcons = false
})

Onglets Horizontaux (Tabs)

Vue d'ensemble CCB

La Caisse des Compensations du Bâtiment de Genève gère les allocations familiales et les cotisations AVS pour les entreprises du secteur de la construction.

  • Fondée en : 1945
  • Employés : Plus de 50 collaborateurs
  • Entreprises affiliées : ~3'000
  • Travailleurs couverts : ~25'000

Notre mission est de garantir la protection sociale des travailleurs du bâtiment à Genève.

Données 2025

Indicateur 2024 2025 Évolution
Entreprises affiliées 2'850 3'050 +7%
Travailleurs couverts 23'500 25'200 +7.2%
Allocations versées CHF 45M CHF 48M +6.7%
Satisfaction client 87% 92% +5.7%

Nos Services

Allocations Familiales

Gestion complète des allocations pour enfants et formation.

  • Allocation pour enfant : CHF 300/mois
  • Allocation de formation : CHF 400/mois
  • Traitement en 24h
Cotisations AVS

Perception et gestion des cotisations sociales.

  • AVS/AI/APG : 10.6%
  • AC : 2.2%
  • Déclaration en ligne

Nous Contacter

Coordonnées

Adresse :
Rue du Commerce 12
1204 Genève
Suisse

Téléphone : +41 22 123 45 67
Email : info@ccb.ch
Web : www.ccb.ch

Horaires d'ouverture
Lundi - Jeudi08:00 - 17:00
Vendredi08:00 - 16:00
Samedi - DimancheFermé

@await Component.InvokeAsync("Tabs", new {
    id = "myTabs",
    tabs = new[] {
        new { Id = "tab1", Title = "Tab 1", Content = "<p>Contenu 1</p>", Active = true },
        new { Id = "tab2", Title = "Tab 2", Content = "<p>Contenu 2</p>", Active = false }
    }
})

Onglets Verticaux

Tabs Verticales Standard

Informations de Profil

Gérez vos informations personnelles et préférences de compte.

Paramètres de Sécurité

Configurez vos options de sécurité et confidentialité.

Préférences de Notifications

Choisissez comment vous souhaitez être notifié.

Informations de Facturation

Gérez vos méthodes de paiement et factures.

Prochain paiement le 15 février 2026
Méthodes de paiement
•••• •••• •••• 4242 Par défaut

Pills Verticales

Tableau de Bord

Utilisateurs

1,234

+12% ce mois
Revenus

CHF 45'678

+8% ce mois

Rapports et Analyses

Consultez vos rapports détaillés et statistiques.

  • Rapport mensuel - Janvier 2026
  • Analyse des performances
  • Rapport de satisfaction client

Configuration Système

Gérez les paramètres globaux de l'application.

@await Component.InvokeAsync("Tabs", new {
    id = "myVerticalTabs",
    vertical = true,
    tabs = new[] {
        new { Id = "vtab1", Title = "Tab 1", Icon = "fas fa-user", Content = "<p>Contenu 1</p>", Active = true },
        new { Id = "vtab2", Title = "Tab 2", Icon = "fas fa-cog", Content = "<p>Contenu 2</p>", Active = false }
    }
})

Barres de Progression

Progression Standard

25%
50%
75%

Progression Animée

Chargement...

Progression Multiple

30%
20%
15%
@await Component.InvokeAsync("ProgressBar", new {
    value = 50,
    variant = "primary",
    showPercentage = true
})

Indicateurs de Chargement

Spinners

Spinners dans Boutons

@await Component.InvokeAsync("Spinner", new {
    size = "32px",
    color = "var(--success)"
})

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 :

@await Component.InvokeAsync("Modal", new {
    id = "myModal",
    title = "Titre",
    bodyContent = "<p>Contenu...</p>",
    footerContent = "<button class='btn btn-primary'>OK</button>"
})

Notifications Toast

Cliquez sur les boutons pour afficher des notifications toast :

// JavaScript
CCB.Toasts.show('Message', 'success', 'Titre');

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é

@await Component.InvokeAsync("Divider", new {
    type = "solid"
})

@await Component.InvokeAsync("Divider", new {
    type = "text",
    text = "OU"
})

Avatars

Tailles d'Avatar

JS
MD
LG
XL

Groupe d'Avatars

A1
B2
C3
D4
+5
@await Component.InvokeAsync("Avatar", new {
    src = "https://...",
    size = "lg",
    status = "online"
})

@await Component.InvokeAsync("Avatar", new {
    initials = "AB",
    badge = "5"
})

Barre de Navigation (Navbar)

Composant de navigation principal avec logo, liens, et actions. Utilise le ViewComponent modulaire.

Navbar Standard (avec actions) 

@await Component.InvokeAsync("Navbar", new {
    brand = "CCB Design System",
    brandUrl = "/CorporateDesign/Index",
    brandIcon = "fas fa-cube",
    showActions = true
})

Navbar Simple (sans actions) 

@await Component.InvokeAsync("Navbar", new {
    brand = "Mon Application",
    brandUrl = "/",
    brandIcon = "fas fa-rocket",
    showActions = false
})
Paramètres du Navbar ViewComponent
  • brand - Texte du logo/marque (défaut: "CCB Design System")
  • brandUrl - URL du lien du logo (défaut: "/CorporateDesign/Index")
  • brandIcon - Icône FontAwesome du logo (défaut: "fas fa-cube")
  • showActions - Afficher les boutons d'action (défaut: true)

Pied de Page (Footer)

Composant de pied de page avec informations, navigation et liens sociaux. Utilise le ViewComponent modulaire.

Footer Complet (avec navigation et liens sociaux) 

@await Component.InvokeAsync("Footer", new {
    title = "CCB Design System",
    description = "Système de design moderne pour la CCB de Genève",
    showSocialLinks = true,
    showNavigation = true
})

Footer Minimal (sans navigation ni liens sociaux) 

@await Component.InvokeAsync("Footer", new {
    title = "Mon Entreprise",
    description = "Description de mon entreprise ici",
    showSocialLinks = false,
    showNavigation = false
})
Paramètres du Footer ViewComponent
  • title - Titre du footer (défaut: "CCB Design System")
  • description - Description sous le titre
  • showSocialLinks - Afficher les liens sociaux (défaut: true)
  • showNavigation - Afficher les colonnes de navigation (défaut: true)