Snippets Card Team – Material Design

Material Design Card Card Team Template Ui Snippets Html
Snippet de carte de l'équipe avec design moderne en responsive avec Material Design.
<!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>Snippets Card Team Material Design 2026 0420225 | AngularForAll</title>
<!-- Material Symbols & Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0,1" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

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

    body {
      font-family: 'Roboto', sans-serif;
      background: #f5f5f5;
      min-height: 100vh;
      padding: 40px 20px;
    }

    /* Material Design Container */
    .container {
      max-width: 1280px;
      margin: 0 auto;
    }

    /* Header Material */
    .md-headline {
      font-size: 2.5rem;
      font-weight: 400;
      letter-spacing: 0;
      color: #1d1b20;
      margin-bottom: 8px;
    }

    .md-subhead {
      font-size: 1rem;
      font-weight: 400;
      color: #49454f;
      margin-bottom: 40px;
    }

    .md-chip {
      display: inline-block;
      background: #e8def8;
      color: #1d1b20;
      padding: 4px 16px;
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      margin-top: 12px;
    }

    /* Grille Material */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    /* Material Card - Élévation */
    .md-card {
      background: #fffbfe;
      border-radius: 28px;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
      position: relative;
    }

    .md-card:hover {
      box-shadow: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.3);
      transform: translateY(-4px);
    }

    /* Surface teintée */
    .md-card-header {
      background: linear-gradient(135deg, #6750a4 0%, #7b61ff 100%);
      padding: 24px 24px 40px;
      text-align: center;
      position: relative;
    }

    /* Avatar Material */
    .md-avatar {
      width: 120px;
      height: 120px;
      border-radius: 60px;
      border: 4px solid #fffbfe;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      object-fit: cover;
      transition: transform 0.2s;
      background: #e7e0ec;
    }

    .md-card:hover .md-avatar {
      transform: scale(1.03);
    }

    /* Contenu de la carte */
    .md-card-content {
      padding: 16px 24px 24px;
      margin-top: -20px;
      background: #fffbfe;
      border-radius: 28px 28px 28px 28px;
      position: relative;
    }

    /* Nom - Title Large */
    .md-title-large {
      font-size: 1.5rem;
      font-weight: 400;
      letter-spacing: 0;
      color: #1d1b20;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    /* Job - Title Small */
    .md-title-small {
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.1px;
      color: #6750a4;
      margin-bottom: 16px;
      text-transform: uppercase;
    }

    /* Liste d'informations Material */
    .md-list {
      list-style: none;
      margin-bottom: 20px;
    }

    .md-list-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 8px 0;
      color: #49454f;
      font-size: 0.875rem;
      border-bottom: 1px solid #e7e0ec;
    }

    .md-list-item:last-child {
      border-bottom: none;
    }

    .md-list-item .material-symbols-outlined {
      color: #6750a4;
      font-size: 20px;
      width: 24px;
      text-align: center;
      font-variation-settings: 'FILL' 0, 'wght' 400;
    }

    .md-list-item span:last-child {
      flex: 1;
      line-height: 1.4;
    }

    /* Chips / Badges Material */
    .md-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 20px;
    }

    .md-chip-small {
      background: #e8def8;
      color: #1d1b20;
      padding: 4px 12px;
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    /* Actions Material */
    .md-card-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #e7e0ec;
    }

    /* Material Button */
    .md-button {
      background: transparent;
      border: none;
      padding: 10px 16px;
      border-radius: 100px;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      font-size: 0.875rem;
      letter-spacing: 0.1px;
      color: #6750a4;
      cursor: pointer;
      transition: background 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .md-button:hover {
      background: rgba(103, 80, 164, 0.08);
    }

    .md-button-filled {
      background: #6750a4;
      color: white;
      box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    .md-button-filled:hover {
      background: #7b61ff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    /* Icon Button */
    .md-icon-button {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      cursor: pointer;
      color: #49454f;
      transition: background 0.2s;
    }

    .md-icon-button:hover {
      background: rgba(73, 69, 79, 0.08);
    }

    /* Material Elevation Levels */
    .elevation-1 { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15); }
    .elevation-2 { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15); }
    .elevation-3 { box-shadow: 0 4px 8px 3px rgba(0,0,0,0.15), 0 1px 3px 0 rgba(0,0,0,0.3); }

    /* Responsive */
    @media (max-width: 992px) {
      .team-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .team-grid {
        grid-template-columns: 1fr;
      }
      body { padding: 24px 16px; }
      .md-headline { font-size: 2rem; }
    }

    /* Material Ripple Effect */
    .md-ripple {
      position: relative;
      overflow: hidden;
    }

    /* Animation */
    @keyframes material-fade-in {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .md-card {
      animation: material-fade-in 0.4s ease-out forwards;
    }

    .md-card:nth-child(2) { animation-delay: 0.05s; }
    .md-card:nth-child(3) { animation-delay: 0.1s; }
    .md-card:nth-child(4) { animation-delay: 0.15s; }
    .md-card:nth-child(5) { animation-delay: 0.2s; }
    .md-card:nth-child(6) { animation-delay: 0.25s; }

    /* Surface colors */
    .surface-primary { background: #fffbfe; }
    .surface-secondary { background: #f7f2fa; }
  </style>
</head>
<body>
  <div class="container">
    <!-- Header Material Design -->
    <header style="margin-bottom: 32px;">
      <span class="md-chip">
        <span class="material-symbols-outlined" style="font-size: 16px;">groups</span>
        Équipe
      </span>
      <h1 class="md-headline">Notre équipe</h1>
      <p class="md-subhead">Des professionnels passionnés à votre service</p>
    </header>

    <!-- Grille de cartes Material Design -->
    <div class="team-grid">

      <!-- Carte 1 -->
      <div class="md-card">
        <div class="md-card-header">
          <img src="public/avatar.png" alt="Sophie Martin" class="md-avatar">
        </div>
        <div class="md-card-content">
          <h2 class="md-title-large">Sophie Martin</h2>
          <div class="md-title-small">Directrice Générale</div>

          <ul class="md-list">
            <li class="md-list-item">
              <span class="material-symbols-outlined">location_on</span>
              <span>123 Av. des Champs-Élysées, Paris</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">call</span>
              <span>+33 1 23 45 67 89</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">mail</span>
              <span>sophie.martin@entreprise.fr</span>
            </li>
          </ul>

          <div class="md-chips">
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">star</span>
              Leadership
            </span>
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">strategy</span>
              Stratégie
            </span>
          </div>

          <div class="md-card-actions">
            <button class="md-icon-button" onclick="contactPerson('Sophie Martin', 'email')">
              <span class="material-symbols-outlined">mail</span>
            </button>
            <button class="md-icon-button" onclick="contactPerson('Sophie Martin', 'call')">
              <span class="material-symbols-outlined">call</span>
            </button>
            <button class="md-button md-button-filled" onclick="contactPerson('Sophie Martin', 'message')">
              <span class="material-symbols-outlined">chat</span>
              Message
            </button>
          </div>
        </div>
      </div>

      <!-- Carte 2 -->
      <div class="md-card">
        <div class="md-card-header" style="background: linear-gradient(135deg, #006c4c 0%, #009688 100%);">
          <img src="public/avatar.png" alt="Thomas Dubois" class="md-avatar">
        </div>
        <div class="md-card-content">
          <h2 class="md-title-large">Thomas Dubois</h2>
          <div class="md-title-small" style="color: #006c4c;">Responsable Technique</div>

          <ul class="md-list">
            <li class="md-list-item">
              <span class="material-symbols-outlined">location_on</span>
              <span>45 Rue de la République, Lyon</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">call</span>
              <span>+33 4 78 90 12 34</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">mail</span>
              <span>thomas.dubois@entreprise.fr</span>
            </li>
          </ul>

          <div class="md-chips">
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">code</span>
              DevOps
            </span>
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">cloud</span>
              Cloud
            </span>
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">security</span>
              Sécurité
            </span>
          </div>

          <div class="md-card-actions">
            <button class="md-icon-button" onclick="contactPerson('Thomas Dubois', 'email')">
              <span class="material-symbols-outlined">mail</span>
            </button>
            <button class="md-icon-button" onclick="contactPerson('Thomas Dubois', 'call')">
              <span class="material-symbols-outlined">call</span>
            </button>
            <button class="md-button md-button-filled" style="background: #006c4c;" onclick="contactPerson('Thomas Dubois', 'message')">
              <span class="material-symbols-outlined">chat</span>
              Message
            </button>
          </div>
        </div>
      </div>

      <!-- Carte 3 -->
      <div class="md-card">
        <div class="md-card-header" style="background: linear-gradient(135deg, #b3261e 0%, #e53935 100%);">
          <img src="public/avatar.png" alt="Marie Lambert" class="md-avatar">
        </div>
        <div class="md-card-content">
          <h2 class="md-title-large">Marie Lambert</h2>
          <div class="md-title-small" style="color: #b3261e;">Designer UX/UI</div>

          <ul class="md-list">
            <li class="md-list-item">
              <span class="material-symbols-outlined">location_on</span>
              <span>78 Boulevard Haussmann, Paris</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">call</span>
              <span>+33 1 87 65 43 21</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">mail</span>
              <span>marie.lambert@entreprise.fr</span>
            </li>
          </ul>

          <div class="md-chips">
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">brush</span>
              UI Design
            </span>
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">palette</span>
              UX Research
            </span>
          </div>

          <div class="md-card-actions">
            <button class="md-icon-button" onclick="contactPerson('Marie Lambert', 'email')">
              <span class="material-symbols-outlined">mail</span>
            </button>
            <button class="md-icon-button" onclick="contactPerson('Marie Lambert', 'call')">
              <span class="material-symbols-outlined">call</span>
            </button>
            <button class="md-button md-button-filled" style="background: #b3261e;" onclick="contactPerson('Marie Lambert', 'message')">
              <span class="material-symbols-outlined">chat</span>
              Message
            </button>
          </div>
        </div>
      </div>

      <!-- Carte 4 -->
      <div class="md-card">
        <div class="md-card-header" style="background: linear-gradient(135deg, #f57c00 0%, #fb8c00 100%);">
          <img src="public/avatar.png" alt="Pierre Moreau" class="md-avatar">
        </div>
        <div class="md-card-content">
          <h2 class="md-title-large">Pierre Moreau</h2>
          <div class="md-title-small" style="color: #f57c00;">Développeur Senior</div>

          <ul class="md-list">
            <li class="md-list-item">
              <span class="material-symbols-outlined">location_on</span>
              <span>12 Rue Sainte-Catherine, Bordeaux</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">call</span>
              <span>+33 5 56 43 78 90</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">mail</span>
              <span>pierre.moreau@entreprise.fr</span>
            </li>
          </ul>

          <div class="md-chips">
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">javascript</span>
              React
            </span>
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">data_object</span>
              Node.js
            </span>
          </div>

          <div class="md-card-actions">
            <button class="md-icon-button" onclick="contactPerson('Pierre Moreau', 'email')">
              <span class="material-symbols-outlined">mail</span>
            </button>
            <button class="md-icon-button" onclick="contactPerson('Pierre Moreau', 'call')">
              <span class="material-symbols-outlined">call</span>
            </button>
            <button class="md-button md-button-filled" style="background: #f57c00;" onclick="contactPerson('Pierre Moreau', 'message')">
              <span class="material-symbols-outlined">chat</span>
              Message
            </button>
          </div>
        </div>
      </div>

      <!-- Carte 5 -->
      <div class="md-card">
        <div class="md-card-header" style="background: linear-gradient(135deg, #0b5e7c 0%, #0288d1 100%);">
          <img src="public/avatar.png" alt="Julie Renard" class="md-avatar">
        </div>
        <div class="md-card-content">
          <h2 class="md-title-large">Julie Renard</h2>
          <div class="md-title-small" style="color: #0b5e7c;">Chef de Projet</div>

          <ul class="md-list">
            <li class="md-list-item">
              <span class="material-symbols-outlined">location_on</span>
              <span>34 Rue du Vieux Marché, Nantes</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">call</span>
              <span>+33 2 40 98 76 54</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">mail</span>
              <span>julie.renard@entreprise.fr</span>
            </li>
          </ul>

          <div class="md-chips">
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">schedule</span>
              Agile
            </span>
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">task</span>
              Scrum
            </span>
          </div>

          <div class="md-card-actions">
            <button class="md-icon-button" onclick="contactPerson('Julie Renard', 'email')">
              <span class="material-symbols-outlined">mail</span>
            </button>
            <button class="md-icon-button" onclick="contactPerson('Julie Renard', 'call')">
              <span class="material-symbols-outlined">call</span>
            </button>
            <button class="md-button md-button-filled" style="background: #0b5e7c;" onclick="contactPerson('Julie Renard', 'message')">
              <span class="material-symbols-outlined">chat</span>
              Message
            </button>
          </div>
        </div>
      </div>

      <!-- Carte 6 -->
      <div class="md-card">
        <div class="md-card-header" style="background: linear-gradient(135deg, #5e35b1 0%, #7e57c2 100%);">
          <img src="public/avatar.png" alt="Lucas Bernard" class="md-avatar">
        </div>
        <div class="md-card-content">
          <h2 class="md-title-large">Lucas Bernard</h2>
          <div class="md-title-small" style="color: #5e35b1;">Support Client</div>

          <ul class="md-list">
            <li class="md-list-item">
              <span class="material-symbols-outlined">location_on</span>
              <span>56 Rue de la Paix, Marseille</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">call</span>
              <span>+33 4 91 12 34 56</span>
            </li>
            <li class="md-list-item">
              <span class="material-symbols-outlined">mail</span>
              <span>lucas.bernard@entreprise.fr</span>
            </li>
          </ul>

          <div class="md-chips">
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">headset_mic</span>
              Support 24/7
            </span>
            <span class="md-chip-small">
              <span class="material-symbols-outlined" style="font-size: 14px;">language</span>
              Français/English
            </span>
          </div>

          <div class="md-card-actions">
            <button class="md-icon-button" onclick="contactPerson('Lucas Bernard', 'email')">
              <span class="material-symbols-outlined">mail</span>
            </button>
            <button class="md-icon-button" onclick="contactPerson('Lucas Bernard', 'call')">
              <span class="material-symbols-outlined">call</span>
            </button>
            <button class="md-button md-button-filled" style="background: #5e35b1;" onclick="contactPerson('Lucas Bernard', 'message')">
              <span class="material-symbols-outlined">chat</span>
              Message
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Material Snackbar -->
  <div id="snackbar" style="
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #313033;
    color: #f2f2f2;
    padding: 14px 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
    transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
    z-index: 1000;
    font-family: 'Roboto', sans-serif;
    font-size: 0.875rem;
    max-width: 90%;
  ">
    <span id="snackbar-message">Message envoyé</span>
    <button onclick="hideSnackbar()" style="
      background: none;
      border: none;
      color: #d0bcff;
      font-weight: 500;
      cursor: pointer;
      padding: 8px;
      margin: -8px;
      font-family: 'Roboto', sans-serif;
      font-size: 0.875rem;
    ">OK</button>
  </div>

  <script>
    // Material Design Snackbar
    let snackbarTimeout;
    const snackbar = document.getElementById('snackbar');
    const snackbarMessage = document.getElementById('snackbar-message');

    function showSnackbar(message) {
      snackbarMessage.textContent = message;
      snackbar.style.transform = 'translateX(-50%) translateY(0)';

      clearTimeout(snackbarTimeout);
      snackbarTimeout = setTimeout(() => {
        hideSnackbar();
      }, 4000);
    }

    function hideSnackbar() {
      snackbar.style.transform = 'translateX(-50%) translateY(100px)';
    }

    // Fonction de contact Material
    function contactPerson(name, action) {
      let message = '';

      switch(action) {
        case 'email':
          message = `📧 Email à ${name} : ouverture du client mail...`;
          break;
        case 'call':
          message = `📞 Appel de ${name} en cours...`;
          break;
        case 'message':
          message = `💬 Message envoyé à ${name}`;
          break;
        default:
          message = `Contact avec ${name}`;
      }

      showSnackbar(message);

      // Simulation d'action
      console.log(`Action: ${action} - Contact: ${name}`);
    }

    // Material Ripple Effect (simplifié)
    document.querySelectorAll('.md-button, .md-icon-button').forEach(button => {
      button.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        ripple.style.position = 'absolute';
        ripple.style.borderRadius = '50%';
        ripple.style.background = 'rgba(0,0,0,0.1)';
        ripple.style.width = ripple.style.height = '100px';
        ripple.style.transform = 'scale(0) translate(-50%, -50%)';
        ripple.style.transformOrigin = '0 0';
        ripple.style.animation = 'ripple 0.4s ease-out';
        ripple.style.pointerEvents = 'none';

        this.style.position = 'relative';
        this.style.overflow = 'hidden';
        this.appendChild(ripple);

        setTimeout(() => ripple.remove(), 400);
      });
    });

    // Ajout style ripple
    const style = document.createElement('style');
    style.textContent = `
      @keyframes ripple {
        to { transform: scale(4); opacity: 0; }
      }
    `;
    document.head.appendChild(style);

    // Fermer snackbar au clic extérieur (optionnel)
    document.addEventListener('click', function(e) {
      if (!snackbar.contains(e.target) && !e.target.closest('.md-button') && !e.target.closest('.md-icon-button')) {
        // hideSnackbar(); // Optionnel
      }
    });
  </script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur
📌 Voir aussi

🏷️ Explorer par mot clé
