Bootstrap
Header
Dashboard
Compte
Html
Bannière d'en-tête Bootstrap pour dashboard utilisateur avec avatar, nom, rôle et navigation rapide.
<!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>Account Header - Dashboard | AngularForAll</title>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" />
<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<style>
body {
background-color: #f0f2f5;
font-family: 'Inter', 'Segoe UI', sans-serif;
}
/* Card Modern Design */
.account-header-card {
background: #ffffff;
border: none;
border-radius: 16px;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
height: 100%;
}
/* Reactivity & Hover */
.account-header-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}
/* Accessibility: Focus State */
.account-header-card:focus-within {
outline: 2px solid #4e73df;
outline-offset: 4px;
}
/* Avatar Styling */
.avatar-wrapper {
width: 64px;
height: 64px;
min-width: 64px;
border-radius: 14px;
overflow: hidden;
background: #f8f9fa;
border: 1px solid #edf2f9;
}
.avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Typography & UX */
.card-label {
font-size: 0.7rem;
text-transform: uppercase;
font-weight: 700;
color: #8898aa;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.main-title {
font-size: 1.05rem;
font-weight: 800;
color: #32325d;
margin-bottom: 2px;
}
.sub-text {
font-size: 0.85rem;
color: #525f7f;
display: block;
line-height: 1.4;
} /* Status Badges */
.status-badge {
font-size: 0.65rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 4px;
display: inline-block;
margin-top: 5px;
}
.bg-inactive {
background: #fee2e2;
color: #dc2626;
}
.bg-active {
background: #dcfce7;
color: #16a34a;
} /* Dates Styling */
.date-info {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 4px;
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="container py-5">
<div class="row">
<!-- 1. MON COMPTE -->
<div class="col-lg-4 col-md-6 mb-4">
<article
class="account-header-card p-3 shadow-sm d-flex align-items-center"
role="region"
aria-label="Informations du compte"
>
<div class="avatar-wrapper mr-3">
<img src="public/avatar.png" class="avatar-img" alt="Avatar de TEST TEST" />
</div>
<div class="flex-grow-1">
<span class="card-label">Mon compte</span>
<h2 class="main-title mb-0">TEST TEST</h2>
<span class="sub-text font-weight-bold text-primary">Super Administrateur</span>
<span class="sub-text small text-muted">
<i class="fas fa-sitemap mr-1"></i>
Direction Générale
</span>
</div>
</article>
</div>
<!-- 2. MA STRUCTURE -->
<div class="col-lg-4 col-md-6 mb-4">
<article
class="account-header-card p-3 shadow-sm d-flex align-items-center"
role="region"
aria-label="Informations de la structure"
>
<div class="avatar-wrapper mr-3">
<img src="public/logo.png" class="avatar-img" alt="Logo de Portfoler" />
</div>
<div class="flex-grow-1">
<span class="card-label">Ma structure</span>
<h2 class="main-title mb-0">Portfoler</h2>
<span class="sub-text">Personne morale</span>
<span class="sub-text small text-info">
<i class="fas fa-leaf mr-1"></i>
Énergies Renouvelables
</span>
</div>
</article>
</div>
<!-- 3. MON ABONNEMENT -->
<div class="col-lg-4 col-md-12 mb-4">
<article
class="account-header-card p-3 shadow-sm d-flex align-items-center"
role="region"
aria-label="Détails de l'abonnement"
>
<div class="avatar-wrapper mr-3 d-flex align-items-center justify-content-center bg-light">
<i class="fas fa-box-open fa-2x text-secondary"></i>
</div>
<div class="flex-grow-1">
<span class="card-label">Mon abonnement</span>
<div class="d-flex align-items-center justify-content-between">
<h2 class="main-title mb-0">PACK STARTER</h2>
<span class="status-badge bg-inactive">INACTIF</span>
</div>
<div class="date-info">
<i class="far fa-calendar-alt mr-1"></i>
01/01/2023 — 31/12/2023
</div>
</div>
</article>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
``` ### Analyse de l'implémentation : 1. **Responsive :** Utilisation des classes `col-lg-4` (3 colonnes sur PC),
`col-md-6` (2 colonnes sur tablette) et `mb-4` pour l'empilement mobile. 2. **Accessibilité (A11y) :** * Balises `
<article>
` et `role="region"` pour une navigation sémantique. * `aria-label` descriptifs pour chaque section. *
`focus-within` en CSS pour mettre en évidence la carte lors d'une navigation au clavier (Tab). 3. **Expérience
Utilisateur (UX) :** * **Hiérarchie visuelle :** Les labels sont petits et gris, les titres sont foncés et gras. *
**Indicateurs visuels :** Utilisation d'icônes (sitemap, leaf, calendar) pour une compréhension instantanée. *
**Statut clair :** Le badge "INACTIF" utilise un contraste rouge élevé pour attirer l'attention. 4. **Réactivité
(Visual Feedback) :** * Effet de transition fluide sur le `transform` et le `box-shadow` au survol. 5. **Modernité
:** * Coins arrondis (`16px`), ombres portées très légères (`shadow-sm`) et bordures invisibles pour un look "SaaS"
épuré.
</article>