Skip to content
DocumentationExamples
← All components

Social Proof

Expandable image-led stories with metrics, quotes and attribution.

Open demo ↗
42%
“A place for a concise, approved customer quote.”

Sample result · Replace with a substantiated customer story.

HTML source & reuse instructions

Include the shared CSS and JavaScript files. Rename copied IDs and their matching references. 


<div class="cp-proof" data-cp-proof="">
<article class="cp-proof-card">
<button aria-controls="proof-0" aria-expanded="true">
         A clearer experience
         <span>
          ↗
         </span>
</button>
<div id="proof-0">
<strong class="display-3">
          42%
         </strong>
<blockquote>
          “A place for a concise, approved customer quote.”
         </blockquote>
<p>
          Sample result · Replace with a substantiated customer story.
         </p>
</div>
</article>
<article class="cp-proof-card">
<button aria-controls="proof-1" aria-expanded="false">
         A stronger connection
         <span>
          ↗
         </span>
</button>
<div hidden="" id="proof-1">
<strong class="display-3">
          2×
         </strong>
<blockquote>
          “Show the human story behind your headline metric.”
         </blockquote>
<p>
          Sample result · Replace with a substantiated customer story.
         </p>
</div>
</article>
<article class="cp-proof-card">
<button aria-controls="proof-2" aria-expanded="false">
         A fresh perspective
         <span>
          ↗
         </span>
</button>
<div hidden="" id="proof-2">
<strong class="display-3">
          95%
         </strong>
<blockquote>
          “Pair a useful result with an attributed testimonial.”
         </blockquote>
<p>
          Sample result · Replace with a substantiated customer story.
         </p>
</div>
</article>
</div>