Testimonials - Done
2 min
Description
This screen shows testimonials provided during PulseChecks.
HTML
<section class="section">
<div class="w-layout-blockcontainer body-container w-container">
<div class="page-header">
<div class="w-layout-grid grid-2">
<div class="page-header-left">
<div class="breadcrumbs">
<div class="breadcrumb">Audience</div>
<div class="breadcrumb-divider">/</div>
<a href="#" class="breadcrumb">Testimonials</a>
</div>
<div class="tab-heading-container-for-button">
<div>
<h1>Testimonials<br></h1>
<div class="subheading">View and Manage Testimonials</div>
</div>
<div class="flex">
<form id="testimonials-filter" name="testimonials-filter" method="get">
<div class="flex full">
<div class="dashboard-filter-container">
<div class="flex full">
<div class="pulsecheck-mark">
<div class="icon _20 w-embed">
<svg fill="currentColor" width="20" height="20" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M432,272a48.09,48.09,0,0,0-45.25,32H347.53l-28.35-85.06a16,16,0,0,0-30.56.66L244.11,375.36l-52.33-314a16,16,0,0,0-31.3-1.25L99.51,304H48a16,16,0,0,0,0,32h64a16,16,0,0,0,15.52-12.12l45.34-181.37,51.36,308.12A16,16,0,0,0,239.1,464c.3,0,.6,0,.91,0a16,16,0,0,0,15.37-11.6l49.8-174.28,15.64,46.94A16,16,0,0,0,336,336h50.75A48,48,0,1,0,432,272Z"></path>
</svg>
</div>
<div class="pulse-check-picker-name">PulseCheck:</div>
</div>
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">All PulseChecks</div>
</div>
<div class="dropdown-open left w-dropdown-list">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">All PulseChecks</div>
</a>
<!-- START PulseChecks - repeat for each PulseCheck -->
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">{PulseCheck Name}</div>
</a>
<!-- END PulseChecks -->
</div>
</div>
</div>
</div>
<div class="flex full">
<!-- START Period / Instance Filter - hide if All PulseChecks, only show if a filtering by a specific PulseCheck -->
<div data-delay="0" data-hover="false" class="dropdown w-dropdown">
<div class="dropdown-closed w-dropdown-toggle">
<div class="dropdown-arrow w-icon-dropdown-toggle"></div>
<div class="dropdown-text">All Periods</div>
</div>
<div class="dropdown-open left w-dropdown-list">
<div class="dropdown-options">
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon selected w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">All Periods</div>
</a>
<!-- START Periods (instances) - repeat for each instance of the selected PulseCheck -->
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">Current</div>
</a>
<!
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">February 2025</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">January 2025</div>
</a>
<a href="#" class="dropdown-option w-inline-block">
<div class="dropdown-option-selected-icon-container">
<div class="dropdown-option-selected-icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check">
<polyline points="20 6 9 17 4 12"></polyline>
</svg></div>
</div>
<div class="dropdown-option-text">December 2024</div>
</a>
</div>
</div>
</div>
<!-- END Period / Instance Filter -->
<div class="flex">
<!-- START Filter Button - opens filter by tag modal -->
<a id="filter" href="#" class="pulsecheck-filter-button w-inline-block">
<div class="icon _16 w-embed">
<svg fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M18,28H14a2,2,0,0,1-2-2V18.41L4.59,11A2,2,0,0,1,4,9.59V6A2,2,0,0,1,6,4H26a2,2,0,0,1,2,2V9.59A2,2,0,0,1,27.41,11L20,18.41V26A2,2,0,0,1,18,28ZM6,6V9.59l8,8V26h4V17.59l8-8V6Z"></path>
</svg>
</div>
</a>
<!-- END Filter Button -->
<!-- START Clear Filter Button - only show if a tag filter is enabled. When clicked, remove all tag filters (then hide clear button again) -->
<a id="remove-filter" href="#" class="pulsecheck-filter-button w-inline-block">
<div class="icon _16 danger-text w-embed">
<svg fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><polygon points="30 11.414 28.586 10 24 14.586 19.414 10 18 11.414 22.586 16 18 20.585 19.415 22 24 17.414 28.587 22 30 20.587 25.414 16 30 11.414">
<path d="M4,4A2,2,0,0,0,2,6V9.1709a2,2,0,0,0,.5859,1.4145L10,18v8a2,2,0,0,0,2,2h4a2,2,0,0,0,2-2V24H16v2H12V17.1709l-.5859-.5855L4,9.1709V6H24V8h2V6a2,2,0,0,0-2-2Z"></path>
</polygon></svg>
</div>
</a>
<!-- END Clear Filter Button -->
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="content-area">
<!-- START IF Testimonials to show -->
<div class="w-layout-grid dashboard-grid">
<!-- START Testimonial Card -->
<div class="dashboard-tile">
<div class="dashboard-card-header">
<div class="dashboard-tile-heading-container">
<div data-tippy-content="Previous Score: 34" class="icon _20 brand-text w-embed">
<svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M12,15H6.11A9,9,0,0,1,10,8.86l1.79-1.2L10.69,6,8.9,7.2A11,11,0,0,0,4,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,12,15Z"></path><path d="M26,15H20.11A9,9,0,0,1,24,8.86l1.79-1.2L24.7,6,22.9,7.2A11,11,0,0,0,18,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,26,15Z"></path></svg>
</div>
<div>From: <strong>{PulseCheck Name -}</strong></div>
</div>
<div class="flex">
<!-- START Delete Testimonial Button - open the "are you sure" modal, only mark inactive if they confirm -->
<a href="#" class="w-inline-block">
<div class="icon _16 danger-text w-embed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
</div>
</a>
<!-- END Delete Testiminial Button -->
</div>
</div>
<div class="testimonial-container">
<a href="#" class="w-inline-block">
<!-- START Avatar Image - if contact has an avatar image show, otherwise show avatar placeholder image -->
<img alt="{First Name} {Last Name}" src="{avatar URL}" loading="lazy" class="testimonial-profile-picture">
<!-- END Avatar Image -->
</a>
<div><em>"{TESTIMONIAL TEST}"</em></div>
<div>
<a href="#"><strong>{First Name} {Last Name}</strong></a>
<!-- START Job Title - include if the Job title field on the contact is populated. -->
<strong> | {Job Title}</strong>
<!-- END Job Title -->
</div>
</div>
<div class="dashboard-tile-footer no-gap">
<div class="flex-down full gap-5">
<div class="dropdown-divider-container">
<div class="divider"></div>
</div>
<div class="text-small">
<div class="flex full space-between no-wrap">
<div class="no-wrap">{Date testiminal created - e.g. Mar 28, 2025}</div>
<!-- START IF Unread -->
<div class="relative">
<div class="div-block-436">
<!-- START Mark as Seen Button -->
<button type="button" class="button secondary small w-inline-block no-wrap">
<span class="icon _16 w-embed">
<svg fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
<path d="M30.94,15.66A16.69,16.69,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16.69,16.69,0,0,0,16,27,16.69,16.69,0,0,0,30.94,16.34,1,1,0,0,0,30.94,15.66ZM16,25c-5.3,0-10.9-3.93-12.93-9C5.1,10.93,10.7,7,16,7s10.9,3.93,12.93,9C26.9,21.07,21.3,25,16,25Z" transform="translate(0 0)"></path>
<path d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z" transform="translate(0 0)"></path>
</svg>
</span>
<span>Mark as Seen</span>
</button>
</div>
</div>
<!-- END IF Unread -->
<!-- START IF Read -->
<div class="flex small-gap">
<div class="icon _12">
<svg fill="currentColor" height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.94,15.66A16.69,16.69,0,0,0,16,5,16.69,16.69,0,0,0,1.06,15.66a1,1,0,0,0,0,.68A16.69,16.69,0,0,0,16,27,16.69,16.69,0,0,0,30.94,16.34,1,1,0,0,0,30.94,15.66ZM16,25c-5.3,0-10.9-3.93-12.93-9C5.1,10.93,10.7,7,16,7s10.9,3.93,12.93,9C26.9,21.07,21.3,25,16,25Z" transform="translate(0 0)"/><path d="M16,10a6,6,0,1,0,6,6A6,6,0,0,0,16,10Zm0,10a4,4,0,1,1,4-4A4,4,0,0,1,16,20Z" transform="translate(0 0)"/></svg>
</div>
<div>Viewed: {Date marked read - e.g. Mar 28, 2025}</div>
</div>
<!-- END IF Read -->
</div>
</div>
</div>
</div>
</div>
<!-- END Testimonial Card -->
</div>
<!-- END IF Testimonials to show -->
<!-- START No Testimonials to show -->
<div class="block padding-2rem white">
<div class="flex-down center gap-1rem">
<div class="icon-circle-5rem">
<div data-tippy-content="Previous Score: 34" class="icon _32 brand-color w-embed">
<svg fill="currentColor" width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M12,15H6.11A9,9,0,0,1,10,8.86l1.79-1.2L10.69,6,8.9,7.2A11,11,0,0,0,4,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,12,15Z"></path><path d="M26,15H20.11A9,9,0,0,1,24,8.86l1.79-1.2L24.7,6,22.9,7.2A11,11,0,0,0,18,16.35V23a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V17A2,2,0,0,0,26,15Z"></path></svg>
</div>
</div>
<h3>No Testimonials Available</h3>
<div>You haven't received any testimonials yet, or no testimonials match your current filter selections.<br></div>
</div>
</div>
<!-- END No Testimonials to show -->
</div>
</div>
</section>