testimonial · avis · preuve-sociale

Témoignage client

Citation client avec photo, nom et fonction. Sert de preuve sociale, plus efficace qu'une citation anonyme.

Voir le code source
<style>
.temoignage {
  max-width: 560px;
  margin: 0 auto;
  padding: 2rem;
  font-family: sans-serif;

  border: 1px solid #eee;
  border-radius: 12px;
}

.temoignage__quote {
  margin: 0 0 1.25rem;
  font-size: 1.1rem;
  line-height: 1.6;
  font-style: italic;
  color: #333;
}

.temoignage__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.temoignage__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.temoignage__name {
  display: block;
  font-weight: 600;
  color: #111;
}

.temoignage__role {
  display: block;
  font-size: 0.85rem;
  color: #777;
}

</style>

<figure class="temoignage">
  <blockquote class="temoignage__quote">
    « Une collaboration excellente du début à la fin. L'équipe a parfaitement
    compris nos besoins et livré un résultat au-delà de nos attentes. »
  </blockquote>
  <figcaption class="temoignage__author">
    <img src="https://placehold.co/64x64" alt="Photo de Claire Dupont" class="temoignage__avatar" />
    <div>
      <span class="temoignage__name">Claire Dupont</span>
      <span class="temoignage__role">Directrice, Entreprise XYZ</span>
    </div>
  </figcaption>
</figure>