6 Cartes Style Widgets

🏷️ Extraits de code HTML 📅 12/04/2026 👤 Mezgani said
Bootstrap Card Widget Style Html

Grille Bootstrap de 6 cartes de style widget avec design épuré, couleurs et typographie soignées.

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <meta name="copyright" content="MEZGANI Said" />
        <meta name="author" content="AngularForAll" />
        <meta name="robots" content="noindex, nofollow" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>6 Cartes Minimalistes - Widgets | AngularForAll</title>

        <!-- Bootstrap 4 CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />

        <!-- IcoFont -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/icofont@2.0.0/css/icofont.min.css" />

        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                background: linear-gradient(145deg, #f6f9fc 0%, #edf2f9 100%);
                font-family:
                    'Inter',
                    -apple-system,
                    BlinkMacSystemFont,
                    'Segoe UI',
                    sans-serif;
                min-height: 100vh;
                padding: 3rem 1.5rem;
            }

            .container-cards {
                max-width: 1440px;
                margin: 0 auto;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
                gap: 2rem;
                padding: 1rem;
            }

            /* ===== CARD 1 : Dernières commandes ===== */
            .card-commandes {
                background: #ffffff;
                border-radius: 28px;
                padding: 1.75rem;
                box-shadow:
                    0 15px 35px -10px rgba(67, 97, 238, 0.08),
                    0 5px 15px -5px rgba(0, 0, 0, 0.02);
                transition: all 0.3s ease;
                border: 1px solid rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(5px);
            }

            .card-commandes:hover {
                transform: translateY(-4px);
                box-shadow:
                    0 25px 45px -12px rgba(67, 97, 238, 0.15),
                    0 8px 20px -8px rgba(0, 0, 0, 0.05);
                border-color: rgba(67, 97, 238, 0.1);
            }

            .card-commandes .card-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 2rem;
                padding-bottom: 1rem;
                border-bottom: 2px solid #f0f4ff;
            }

            .card-commandes .card-header i {
                font-size: 2rem;
                color: #4361ee;
                background: linear-gradient(145deg, #f0f4ff, #e6ecfe);
                padding: 1rem;
                border-radius: 18px;
            }

            .card-commandes .card-header h3 {
                font-size: 1.3rem;
                font-weight: 600;
                color: #1a2639;
                margin: 0;
            }

            .card-commandes .data-grid {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            .card-commandes .data-row {
                display: flex;
                align-items: center;
                padding: 0.6rem 0.8rem;
                background: #fafbff;
                border-radius: 16px;
                transition: all 0.2s ease;
            }

            .card-commandes .data-row:hover {
                background: #f0f4ff;
                transform: scale(1.01);
            }

            .card-commandes .order-num {
                font-weight: 600;
                color: #4361ee;
                min-width: 100px;
                font-size: 0.95rem;
            }

            .card-commandes .order-creator {
                min-width: 90px;
                color: #2b3b5c;
                font-size: 0.9rem;
            }

            .card-commandes .order-date {
                min-width: 80px;
                color: #6c7a9a;
                font-size: 0.85rem;
            }

            .card-commandes .status-badge {
                padding: 0.25rem 0.8rem;
                border-radius: 30px;
                font-size: 0.75rem;
                font-weight: 600;
                margin-right: 0.5rem;
            }

            .card-commandes .status-order {
                background: #e3f2fd;
                color: #1976d2;
            }

            .card-commandes .status-payment {
                background: #e8f5e9;
                color: #2e7d32;
            }

            /* ===== CARD 2 : Derniers tickets ===== */
            .card-tickets {
                background: linear-gradient(145deg, #ffffff, #fafcff);
                border-radius: 28px;
                padding: 1.75rem;
                box-shadow: 0 15px 35px -10px rgba(255, 111, 97, 0.08);
                transition: all 0.3s ease;
                border: 1px solid #fff5f3;
            }

            .card-tickets:hover {
                transform: translateY(-4px);
                box-shadow: 0 25px 45px -12px rgba(255, 111, 97, 0.15);
            }

            .card-tickets .card-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 2rem;
                padding-bottom: 1rem;
                border-bottom: 2px solid #fff0ed;
            }

            .card-tickets .card-header i {
                font-size: 2rem;
                color: #ff6f61;
                background: #fff0ed;
                padding: 1rem;
                border-radius: 18px;
            }

            .card-tickets .ticket-item {
                display: flex;
                align-items: center;
                padding: 0.8rem;
                background: white;
                border-radius: 18px;
                margin-bottom: 0.8rem;
                box-shadow: 0 2px 8px rgba(255, 111, 97, 0.03);
                transition: all 0.2s ease;
            }

            .card-tickets .ticket-item:hover {
                background: #fff0ed;
                transform: translateX(4px);
            }

            .card-tickets .ticket-num {
                font-weight: 700;
                color: #ff6f61;
                min-width: 80px;
                font-size: 0.9rem;
            }

            .card-tickets .ticket-subject {
                flex: 1;
                color: #2b3b5c;
                font-size: 0.9rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 120px;
            }

            .card-tickets .ticket-status {
                padding: 0.2rem 0.7rem;
                border-radius: 30px;
                font-size: 0.7rem;
                font-weight: 600;
                background: #ff6f6120;
                color: #ff6f61;
            }

            /* ===== CARD 3 : Users List ===== */
            .card-userslist {
                background: #ffffff;
                border-radius: 28px;
                padding: 1.75rem;
                box-shadow: 0 15px 35px -10px rgba(76, 175, 80, 0.08);
                transition: all 0.3s ease;
                border-left: 4px solid #4caf50;
            }

            .card-userslist:hover {
                transform: translateY(-4px);
                box-shadow: 0 25px 45px -12px rgba(76, 175, 80, 0.15);
            }

            .card-userslist .card-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 2rem;
            }

            .card-userslist .card-header i {
                font-size: 2rem;
                color: #4caf50;
                background: #e8f5e9;
                padding: 1rem;
                border-radius: 18px;
            }

            .card-userslist .user-row {
                display: grid;
                grid-template-columns: 1fr auto auto;
                align-items: center;
                padding: 0.7rem;
                background: #f8f9fa;
                border-radius: 14px;
                margin-bottom: 0.7rem;
                transition: all 0.2s ease;
            }

            .card-userslist .user-row:hover {
                background: #e8f5e9;
            }

            .card-userslist .user-name {
                font-weight: 600;
                color: #1a2639;
            }

            .card-userslist .user-role {
                color: #4caf50;
                font-size: 0.85rem;
                margin: 0 0.5rem;
            }

            .card-userslist .user-status {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #4caf50;
                margin-left: 0.5rem;
            }

            /* ===== CARD 4 : Users activity ===== */
            .card-activity {
                background: #ffffff;
                border-radius: 28px;
                padding: 1.75rem;
                box-shadow: 0 15px 35px -10px rgba(156, 39, 176, 0.08);
                transition: all 0.3s ease;
                position: relative;
                overflow: hidden;
            }

            .card-activity:hover {
                transform: translateY(-4px);
                box-shadow: 0 25px 45px -12px rgba(156, 39, 176, 0.15);
            }

            .card-activity .card-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 2rem;
            }

            .card-activity .card-header i {
                font-size: 2rem;
                color: #9c27b0;
                background: #f3e5f5;
                padding: 1rem;
                border-radius: 18px;
            }

            .card-activity .activity-item {
                display: flex;
                align-items: center;
                padding: 0.8rem;
                background: linear-gradient(90deg, #fafafa, transparent);
                border-radius: 16px;
                margin-bottom: 0.8rem;
                border-left: 3px solid transparent;
                transition: all 0.2s ease;
            }

            .card-activity .activity-item:hover {
                border-left-color: #9c27b0;
                background: #f3e5f5;
            }

            .card-activity .activity-user {
                min-width: 100px;
                font-weight: 500;
                color: #1a2639;
            }

            .card-activity .activity-device {
                padding: 0.2rem 0.6rem;
                background: #e1bee7;
                border-radius: 20px;
                font-size: 0.7rem;
                color: #4a148c;
            }

            /* ===== CARD 5 : Module disponible ===== */
            .card-modules {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                border-radius: 28px;
                padding: 1.75rem;
                transition: all 0.3s ease;
                color: white;
            }

            .card-modules:hover {
                transform: translateY(-4px);
                box-shadow: 0 30px 50px -15px rgba(102, 126, 234, 0.4);
            }

            .card-modules .card-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 2rem;
            }

            .card-modules .card-header i {
                font-size: 2rem;
                color: white;
                background: rgba(255, 255, 255, 0.2);
                padding: 1rem;
                border-radius: 18px;
            }

            .card-modules .card-header h3 {
                color: white;
                font-weight: 600;
                margin: 0;
            }

            .card-modules .module-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                border-radius: 18px;
                margin-bottom: 1rem;
                transition: all 0.2s ease;
            }

            .card-modules .module-item:hover {
                background: rgba(255, 255, 255, 0.2);
                transform: scale(1.02);
            }

            .card-modules .module-left {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .card-modules .module-left i {
                font-size: 1.5rem;
                color: white;
            }

            .card-modules .state-indicator {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: #4caf50;
                box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
            }

            /* ===== CARD 6 : Configuration app ===== */
            .card-config {
                background: #ffffff;
                border-radius: 28px;
                padding: 1.75rem;
                box-shadow: 0 15px 35px -10px rgba(255, 152, 0, 0.08);
                transition: all 0.3s ease;
                border: 1px solid #fff3e0;
            }

            .card-config:hover {
                transform: translateY(-4px);
                box-shadow: 0 25px 45px -12px rgba(255, 152, 0, 0.15);
            }

            .card-config .card-header {
                display: flex;
                align-items: center;
                gap: 1rem;
                margin-bottom: 2rem;
            }

            .card-config .card-header i {
                font-size: 2rem;
                color: #ff9800;
                background: #fff3e0;
                padding: 1rem;
                border-radius: 18px;
            }

            .card-config .config-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0.8rem 1rem;
                background: #fafafa;
                border-radius: 16px;
                margin-bottom: 0.8rem;
                transition: all 0.2s ease;
            }

            .card-config .config-item:hover {
                background: #fff3e0;
                transform: translateX(4px);
            }

            .card-config .config-left {
                display: flex;
                align-items: center;
                gap: 0.8rem;
            }

            .card-config .config-left i {
                font-size: 1.2rem;
                color: #ff9800;
            }

            .card-config .config-value {
                font-weight: 600;
                color: #ff9800;
                background: #fff3e0;
                padding: 0.3rem 0.8rem;
                border-radius: 30px;
                font-size: 0.85rem;
            }

            /* Responsive */
            @media (max-width: 768px) {
                .container-cards {
                    grid-template-columns: 1fr;
                    gap: 1.5rem;
                }

                body {
                    padding: 1.5rem 1rem;
                }
            }

            /* Style commun pour les headers */
            .card-header h3 {
                font-size: 1.2rem;
                font-weight: 600;
                color: #1a2639;
                margin: 0;
                letter-spacing: -0.02em;
            }

            .card-header small {
                color: #6c7a9a;
                font-size: 0.85rem;
            }
        </style>
    </head>
    <body>
        <div class="container-cards">
            <!-- CARD 1 : Dernières commandes -->
            <div class="card-commandes">
                <div class="card-header">
                    <i class="icofont-cart"></i>
                    <div>
                        <h3>Dernières commandes</h3>
                        <small>24 nouvelles aujourd'hui</small>
                    </div>
                </div>
                <div class="data-grid">
                    <div class="data-row">
                        <span class="order-num">#CMD-001</span>
                        <span class="order-creator">Sophie M.</span>
                        <span class="order-date">11/03</span>
                        <span class="status-badge status-order">Livrée</span>
                        <span class="status-badge status-payment">Payée</span>
                    </div>
                    <div class="data-row">
                        <span class="order-num">#CMD-002</span>
                        <span class="order-creator">Thomas L.</span>
                        <span class="order-date">11/03</span>
                        <span class="status-badge status-order">En cours</span>
                        <span class="status-badge status-payment">En attente</span>
                    </div>
                    <div class="data-row">
                        <span class="order-num">#CMD-003</span>
                        <span class="order-creator">Emma R.</span>
                        <span class="order-date">10/03</span>
                        <span class="status-badge status-order">Expédiée</span>
                        <span class="status-badge status-payment">Payée</span>
                    </div>
                </div>
            </div>

            <!-- CARD 2 : Derniers tickets -->
            <div class="card-tickets">
                <div class="card-header">
                    <i class="icofont-ticket"></i>
                    <div>
                        <h3>Derniers tickets</h3>
                        <small>8 en attente</small>
                    </div>
                </div>
                <div class="ticket-item">
                    <span class="ticket-num">#TKT-101</span>
                    <span class="ticket-subject">Problème connexion</span>
                    <span class="ticket-status">Urgent</span>
                </div>
                <div class="ticket-item">
                    <span class="ticket-num">#TKT-102</span>
                    <span class="ticket-subject">Demande d'info</span>
                    <span class="ticket-status">En cours</span>
                </div>
                <div class="ticket-item">
                    <span class="ticket-num">#TKT-103</span>
                    <span class="ticket-subject">Support technique</span>
                    <span class="ticket-status">Résolu</span>
                </div>
            </div>

            <!-- CARD 3 : Users List -->
            <div class="card-userslist">
                <div class="card-header">
                    <i class="icofont-users-alt-3"></i>
                    <div>
                        <h3>Liste utilisateurs</h3>
                        <small>156 actifs</small>
                    </div>
                </div>
                <div class="user-row">
                    <span class="user-name">Jean Dupont</span>
                    <span class="user-role">Admin</span>
                    <span class="user-status" style="background: #4caf50"></span>
                </div>
                <div class="user-row">
                    <span class="user-name">Marie Curie</span>
                    <span class="user-role">Éditeur</span>
                    <span class="user-status" style="background: #ff9800"></span>
                </div>
                <div class="user-row">
                    <span class="user-name">Paul Martin</span>
                    <span class="user-role">Lecteur</span>
                    <span class="user-status" style="background: #4caf50"></span>
                </div>
            </div>

            <!-- CARD 4 : Users activity -->
            <div class="card-activity">
                <div class="card-header">
                    <i class="icofont-activity"></i>
                    <div>
                        <h3>Activité récente</h3>
                        <small>Dernières 24h</small>
                    </div>
                </div>
                <div class="activity-item">
                    <span class="activity-user">Jean D.</span>
                    <span style="flex: 1">Connexion</span>
                    <span class="activity-device">Mobile</span>
                </div>
                <div class="activity-item">
                    <span class="activity-user">Marie C.</span>
                    <span style="flex: 1">Upload fichier</span>
                    <span class="activity-device">Desktop</span>
                </div>
                <div class="activity-item">
                    <span class="activity-user">Paul M.</span>
                    <span style="flex: 1">Modification</span>
                    <span class="activity-device">Tablette</span>
                </div>
            </div>

            <!-- CARD 5 : Module disponible -->
            <div class="card-modules">
                <div class="card-header">
                    <i class="icofont-ui-settings"></i>
                    <div>
                        <h3 style="color: white">Modules disponibles</h3>
                        <small style="color: rgba(255, 255, 255, 0.8)">12 installés</small>
                    </div>
                </div>
                <div class="module-item">
                    <div class="module-left">
                        <i class="icofont-chart"></i>
                        <span>Analytics</span>
                    </div>
                    <span class="state-indicator"></span>
                </div>
                <div class="module-item">
                    <div class="module-left">
                        <i class="icofont-email"></i>
                        <span>Mailer</span>
                    </div>
                    <span class="state-indicator"></span>
                </div>
                <div class="module-item">
                    <div class="module-left">
                        <i class="icofont-database"></i>
                        <span>Backup</span>
                    </div>
                    <span class="state-indicator" style="background: #ff9800"></span>
                </div>
            </div>

            <!-- CARD 6 : Configuration app -->
            <div class="card-config">
                <div class="card-header">
                    <i class="icofont-ui-settings"></i>
                    <div>
                        <h3>Configuration</h3>
                        <small>Paramètres généraux</small>
                    </div>
                </div>
                <div class="config-item">
                    <div class="config-left">
                        <i class="icofont-globe"></i>
                        <span>Langue</span>
                    </div>
                    <span class="config-value">Français</span>
                </div>
                <div class="config-item">
                    <div class="config-left">
                        <i class="icofont-notification"></i>
                        <span>Notifications</span>
                    </div>
                    <span class="config-value">Activées</span>
                </div>
                <div class="config-item">
                    <div class="config-left">
                        <i class="icofont-moon"></i>
                        <span>Thème</span>
                    </div>
                    <span class="config-value">Sombre</span>
                </div>
            </div>
        </div>
    </body>
</html>

📌 Voir aussi

📌 Snippets similaires

Tous
Bootstrap

Bootstrap 4 Card ChartJS

Dashboard Bootstrap 4 avec cartes et graphiques ChartJS pour visualiser les données en temps réel.
Landing

Landing Page Simple

Template de landing page simple et efficace avec hero section, features et call-to-action.
Bootstrap

Dashboard List Cards

Template Bootstrap de dashboard avec cartes en liste pour afficher des données structurées et filtrables.

🏷️ Explorer par mot clé

Abonnement Accessibilité Accordion Admin Administration Agent Skills Agents Agile Ai Alert Alertes Analogjs Analytics Android Angular Angular 15 Angular 17 Angular 18 Angular 19 Angular 20 Angular Component Standalone Angular Elements Angular Guard Angular Material Angular Pipe Directive Angular Routing Angular Service Http Anthropic Api Api Browser Api Data App.routes.ts Application Apprentissage Architecture Array Ascii Async Asynchrone Audio Authentification Automation Automatisation Avancé Avatar Aws Backend Balises Base De Donnees Beautifier Json Best Practices Bibliothèques Bien-Etre Big-Data Bootstrap Bootstrap 4 Bootstrap Icons Bouton Boutons Box Model Browser Burnout Cache Navigateur Calculatrice Canvas Html5 Capture Ecran Url Capture Page Web Caracteres Caracteres Speciaux Card Cards Carriere Cdn Change Detection Chart Chartjs Chatbot Chatgpt Chef De Projet Chrome Devtools Ci Ci Cd Cicd Classe Claude Claude Code Clean-Architecture Cli Closures Cloud Cloudfront Clustering Code-Review Collaboration Collapse Color Picker Css Command Line Commande Components Composants