More Variants available on:
https://sectionheroes.de/products/social-proof
<aside> 💡 What can be customized?
Text, whitespace & spacing, positions, colors, border radius, images, image borders & shadows
</aside>
Comments are stored in the codes so that you know where you can adjust something. Comments are colored green in the previewer, and you can recognize them by this:
<!-- This is a comment -->
/* This is a comment */
// And this is also a comment
Open the Code Previewer and insert the Code below. ➡️ Code Previewer: Click Here
<div class="SH-customer-loves">
<div class="SH-customer-images">
<div class="SH-verified-icon">
<svg xmlns="<http://www.w3.org/2000/svg>" viewBox="0 0 48 48">
<polygon class="SH-svg-icon-bg" points="29.62,3 33.053,8.308 39.367,8.624 39.686,14.937 44.997,18.367 42.116,23.995 45,29.62 39.692,33.053 39.376,39.367 33.063,39.686 29.633,44.997 24.005,42.116 18.38,45 14.947,39.692 8.633,39.376 8.314,33.063 3.003,29.633 5.884,24.005 3,18.38 8.308,14.947 8.624,8.633 14.937,8.314 18.367,3.003 23.995,5.884"/>
<polygon class="SH-svg-icon-check" points="21.396,31.255 14.899,24.76 17.021,22.639 21.428,27.046 30.996,17.772 33.084,19.926"/>
</svg>
</div>
<!-- Customer image 1 -->
<img src="<https://cdn.shopify.com/s/files/1/0831/4182/0761/files/Leon.png?v=1720121761>" alt="Leon" class="SH-customer-img">
<!-- Customer image 2 -->
<img src="<https://cdn.shopify.com/s/files/1/0831/4182/0761/files/Kim.png?v=1720121769>" alt="Kim" class="SH-customer-img">
</div>
<!-- Text area -->
<div class="SH-customer-text">
<!-- Text with highlighted parts -->
<span>Leon, Kim, and <b>328 other customers</b> love our <b>products</b></span>
</div>
</div>
<style>
/* Main box */
.SH-customer-loves {
align-items: center; /* Centers the elements vertically */
background-color: #f2f2f2; /* Background color of the box */
border-radius: 30px; /* Rounded corners of the box */
padding: 10px 20px; /* Padding of the box. First value: Top/Bottom. Second value: Left/Right */
width: 100%;
display: flex;
box-sizing: border-box;
position: relative;
flex-wrap: wrap;
}
/* Spacing for profile pictures from text */
.SH-customer-images {
margin-right: 10px; /* Space from text */
display: flex;
align-items: center;
position: relative;
}
/* Appearance of profile pictures */
.SH-customer-img {
width: 40px; /* Size of customer images */
height: 40px; /* Size of customer images */
border-radius: 50%; /* Rounded image */
border: 2px solid #FFFFFF; /* White border around the images */
box-shadow: 0 0 0 2px #4a90e2; /* Blue circle around the images */
margin-left: -10px; /* Overlap effect */
}
/* Blue verification icon */
.SH-verified-icon {
top: -5px; /* Vertical positioning of the icon */
left: 50px; /* Horizontal positioning of the icon */
width: 20px; /* Width of the icon */
height: 20px; /* Height of the icon */
position: absolute;
z-index: 1;
}
/* Background of blue verification icon */
.SH-verified-icon .SH-svg-icon-bg {
fill: #42a5f5; /* Color of the background in the icon */
}
/* Checkmark of blue verification icon */
.SH-verified-icon .SH-svg-icon-check {
fill: #fff; /* Color of the checkmark in the icon */
}
/* Text */
.SH-customer-text {
font-size: 14px; /* Font size of the text */
color: #000; /* Color of the text */
flex: 1;
line-height: 16px; /* Line height of the text */
min-width: 0;
}
/* Bold text */
.SH-customer-text b {
font-weight: bold; /* Bold text for highlighted parts */
color: #000; /* Color of the bold text */
}
</style>
<!-- Copyright © 2024 by sectionheroes. All rights reserved. Unauthorized use will be legally prosecuted -->