Bootstrap 5
Template
Email
Detail
Gmail
Card Email
Dashbord
Carte détail email optimisée pour la visualisation et l'interaction. Design moderne et responsive.
<!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>Card Detail Email Bootstrap 5 2026 04220331 | AngularForAll</title>
<!-- Bootstrap 5 + icônes -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f2f4f7;
font-family: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
padding: 24px 16px;
min-height: 100vh;
display: flex;
justify-content: center;
}
/* Container principal de l'email (style boîte de réception Gmail) */
.email-container {
max-width: 820px;
width: 100%;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.05), 0 4px 16px 0 rgba(60, 64, 67, 0.12);
overflow: hidden;
border: 1px solid #e0e3e7;
}
/* En-tête façon Gmail : métadonnées */
.email-header {
padding: 18px 24px 12px 24px;
border-bottom: 1px solid #e8eaed;
}
.subject-line {
font-size: 24px;
font-weight: 450;
color: #202124;
margin-bottom: 16px;
letter-spacing: -0.2px;
line-height: 1.3;
}
/* Ligne expéditeur */
.sender-row {
display: flex;
align-items: flex-start;
gap: 14px;
}
.avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(145deg, #1a73e8, #0d5bbd);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 500;
font-size: 18px;
flex-shrink: 0;
}
.sender-info {
flex: 1;
}
.sender-name {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 12px;
margin-bottom: 4px;
}
.sender-name h3 {
font-size: 16px;
font-weight: 600;
color: #202124;
margin: 0;
}
.sender-email {
color: #5f6368;
font-size: 14px;
font-weight: 400;
}
.email-meta-details {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
color: #5f6368;
font-size: 13px;
}
.email-meta-details i {
margin-right: 4px;
font-size: 12px;
}
.to-info {
color: #5f6368;
font-size: 13px;
margin-top: 6px;
}
.to-info i {
margin-right: 6px;
color: #5f6368;
}
.action-icons {
display: flex;
gap: 18px;
color: #5f6368;
font-size: 18px;
}
.action-icons i {
cursor: pointer;
transition: color 0.15s;
}
.action-icons i:hover {
color: #1a73e8;
}
/* Corps du message */
.email-body {
padding: 28px 32px 32px 32px;
background: #ffffff;
}
.message-content {
color: #202124;
font-size: 15px;
line-height: 1.6;
}
.message-content p {
margin-bottom: 18px;
}
/* Bloc citation style Gmail */
.gmail-quote {
border-left: 3px solid #1a73e8;
padding-left: 18px;
margin: 20px 0;
color: #5f6368;
font-style: normal;
}
/* Pièces jointes */
.attachments-section {
margin-top: 28px;
border-top: 1px solid #e8eaed;
padding-top: 22px;
}
.attachments-title {
font-size: 14px;
font-weight: 500;
color: #5f6368;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.attachment-item {
display: flex;
align-items: center;
padding: 12px 16px;
background: #f8f9fa;
border-radius: 18px;
margin-bottom: 10px;
border: 1px solid #e8eaed;
transition: background 0.15s;
}
.attachment-item:hover {
background: #f1f3f4;
}
.attachment-icon {
width: 44px;
height: 44px;
background: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
color: #ea4335;
font-size: 22px;
border: 1px solid #dadce0;
}
.attachment-details {
flex: 1;
}
.attachment-name {
font-weight: 500;
color: #202124;
font-size: 15px;
margin-bottom: 4px;
}
.attachment-meta {
color: #5f6368;
font-size: 13px;
}
.attachment-download {
color: #1a73e8;
font-size: 20px;
padding: 8px;
border-radius: 50%;
transition: background 0.15s;
}
.attachment-download:hover {
background: #e8f0fe;
}
/* Bouton de réponse rapide */
.reply-box {
margin-top: 28px;
background: #f8f9fa;
border-radius: 24px;
padding: 8px 16px;
display: flex;
align-items: center;
border: 1px solid #e8eaed;
}
.reply-box i {
color: #5f6368;
font-size: 18px;
margin-right: 14px;
}
.reply-box span {
color: #5f6368;
font-size: 15px;
}
/* Footer Gmail */
.email-footer {
background: #f8f9fa;
padding: 18px 24px;
border-top: 1px solid #e8eaed;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #5f6368;
}
.footer-actions i {
margin-left: 16px;
font-size: 16px;
color: #5f6368;
cursor: pointer;
}
.footer-actions i:hover {
color: #1a73e8;
}
/* Responsive */
@media (max-width: 600px) {
body {
padding: 12px 8px;
}
.email-body {
padding: 20px 18px;
}
.subject-line {
font-size: 20px;
}
.action-icons {
gap: 12px;
}
}
</style>
</head>
<body>
<div class="email-container">
<!-- ========== EN-TÊTE : METADONNÉES EMAIL ========= -->
<div class="email-header">
<!-- Sujet -->
<h1 class="subject-line">
Invitation : Revue de projet Google Workspace – mardi 25 avril
</h1>
<!-- Expéditeur + avatar + infos -->
<div class="sender-row">
<div class="avatar">
<span>MD</span>
</div>
<div class="sender-info">
<div class="sender-name">
<h3>Marie Dupont</h3>
<span class="sender-email"><marie.dupont@google.com></span>
<span class="ms-2 badge bg-light text-dark rounded-pill px-3 py-1" style="font-weight: 400; font-size: 12px;">
<i class="bi bi-star-fill" style="color: #fbbc04; font-size: 10px;"></i> Important
</span>
</div>
<div class="email-meta-details">
<span><i class="bi bi-person"></i> à moi, équipe-projet@</span>
<span><i class="bi bi-calendar3"></i> mar. 25 avr. 14:30 (il y a 2 heures)</span>
<span><i class="bi bi-clock"></i> 45 min</span>
</div>
<div class="to-info">
<i class="bi bi-reply-all"></i> Répondre à marie.dupont@google.com
</div>
</div>
<div class="action-icons">
<i class="bi bi-star" title="Ajouter aux favoris"></i>
<i class="bi bi-reply" title="Répondre"></i>
<i class="bi bi-three-dots-vertical" title="Plus d'options"></i>
</div>
</div>
</div>
<!-- ========== CORPS DU MESSAGE ========= -->
<div class="email-body">
<div class="message-content">
<p>Bonjour l'équipe,</p>
<p>J'espère que vous allez bien. Je vous confirme notre <strong>revue de projet Google Workspace</strong> prévue ce mardi à 14h30. Nous ferons le point sur l'avancement des migrations et les prochaines étapes.</p>
<!-- Citation style Gmail -->
<div class="gmail-quote">
<i class="bi bi-quote me-1"></i>
Ordre du jour :<br>
• Point migration Drive (15 min)<br>
• Sécurité et accès (15 min)<br>
• Questions diverses (15 min)
</div>
<p>Vous trouverez ci-joint la présentation de la dernière réunion ainsi que le document de suivi. N'hésitez pas à ajouter vos commentaires avant la réunion.</p>
<p style="margin-bottom: 8px;">Cordialement,</p>
<p style="font-weight: 450; color: #1a73e8;">— Marie Dupont<br>
<span style="font-weight: 400; font-size: 14px; color: #5f6368;">Product Manager · Google Workspace</span></p>
</div>
<!-- ===== PIÈCES JOINTES ===== -->
<div class="attachments-section">
<div class="attachments-title">
<i class="bi bi-paperclip me-1"></i> 2 pièces jointes · 3,8 Mo
</div>
<!-- Pièce jointe 1 -->
<div class="attachment-item">
<div class="attachment-icon">
<i class="bi bi-file-earmark-slides"></i>
</div>
<div class="attachment-details">
<div class="attachment-name">Revue_Projet_Google_April25.pdf</div>
<div class="attachment-meta">PDF · 2,4 Mo · Modifié le 22 avr.</div>
</div>
<div class="attachment-download">
<i class="bi bi-download"></i>
</div>
</div>
<!-- Pièce jointe 2 -->
<div class="attachment-item">
<div class="attachment-icon">
<i class="bi bi-file-earmark-spreadsheet"></i>
</div>
<div class="attachment-details">
<div class="attachment-name">Suivi_Migration_Avril.xlsx</div>
<div class="attachment-meta">Feuille de calcul · 1,4 Mo</div>
</div>
<div class="attachment-download">
<i class="bi bi-download"></i>
</div>
</div>
</div>
<!-- Boîte "Répondre" ou "Répondre à tous" rapide -->
<div class="reply-box">
<i class="bi bi-reply"></i>
<span>Répondre</span>
<i class="bi bi-reply-all ms-3"></i>
<span>Répondre à tous</span>
<i class="bi bi-forward ms-3"></i>
<span>Transférer</span>
</div>
</div>
<!-- ========== FOOTER STYLE GMAIL ========= -->
<div class="email-footer">
<div>
<i class="bi bi-envelope me-1"></i>
<span>Reçu de marie.dupont@google.com · </span>
<a href="#" style="color: #1a73e8; text-decoration: none;">Se désabonner</a>
</div>
<div class="footer-actions">
<i class="bi bi-printer" title="Imprimer"></i>
<i class="bi bi-exclamation-circle" title="Signaler comme spam"></i>
<i class="bi bi-trash3" title="Supprimer"></i>
<i class="bi bi-archive" title="Archiver"></i>
</div>
</div>
</div>
<!-- Optionnel : un second email (aperçu discussion) pour montrer le fil de conversation -->
<div style="max-width: 820px; margin: 20px auto 0; padding: 0 4px;">
<div style="display: flex; align-items: center; gap: 8px; color: #5f6368; font-size: 13px; margin-bottom: 8px;">
<i class="bi bi-chat-dots"></i> 3 messages dans cette conversation
</div>
<!-- Message précédent (condensé) -->
<div style="background: white; border-radius: 16px; padding: 14px 18px; border: 1px solid #e0e3e7; margin-bottom: 8px; opacity: 0.9;">
<div style="display: flex; gap: 12px;">
<div style="width: 32px; height: 32px; background: #ea4335; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 14px;">MD</div>
<div style="flex:1;">
<div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
<span style="font-weight: 500;">Marie Dupont</span>
<span style="color: #5f6368; font-size: 12px;">23 avr.</span>
</div>
<div style="color: #202124; font-size: 14px;">Bonjour, je vous propose de fixer la revue projet mardi prochain. Êtes-vous disponibles ?</div>
</div>
</div>
</div>
<div style="background: white; border-radius: 16px; padding: 14px 18px; border: 1px solid #e0e3e7;">
<div style="display: flex; gap: 12px;">
<div style="width: 32px; height: 32px; background: #34a853; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: 500; font-size: 14px;">TC</div>
<div style="flex:1;">
<div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
<span style="font-weight: 500;">Thomas (vous)</span>
<span style="color: #5f6368; font-size: 12px;">23 avr.</span>
</div>
<div style="color: #202124; font-size: 14px;">Disponible mardi 14h30. Merci Marie !</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur