No notes defined.
<div style="background: #f7fafc; padding: 2rem 0;">
<div class="row row--xsmall">
<blockquote class="review-panel">
<div class="review-panel__stars">
<span class="visually-hidden">Rated 5 stars</span>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
</div>
<p>We proudly use modmore's Redactor on all of our websites. <strong>Its simple, intuitive layout, is perfect for all types of clients and their respective experience and type of use.</strong></p>
<p>Our feedback is listened to, bugs (if any) are dealt with promptly, and the team at modmore are very approachable. Keep up the good work!</p>
<cite class="review-panel__footer">
<div class="review-panel__media">
<img class="review-panel__avatar" src="https://www.gravatar.com/avatar/7bb3a95a90f2b8771b9aa283eacfd7f0?d=mm&r=g">
</div>
<div class="review-panel__cite">
<p class="review-panel__person">Graeme Leighfield</p>
<p class="review-panel__company">Founder of Gel Studios</p>
</div>
</cite>
</blockquote>
</div>
<div class="row row--xsmall">
<blockquote class="review-panel">
<div class="review-panel__stars">
<span class="visually-hidden">Rated 5 stars</span>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
<svg role="img" class="review-panel__star">
<use xlink:href="/svg/svg-symbols.svg#star"></use>
</svg>
</div>
<p>As a professional designer, none of my clients go without redactor as a standard feature in any site I build. <strong>Nothing beats the stability, ease of use, flexibility and customization of Redactor</strong>. Some say paying for a WYSIWYG isn't worth it, experience and the satisfaction of my clients says otherwise.</p>
<cite class="review-panel__footer">
<div class="review-panel__media">
<img class="review-panel__avatar" src="https://www.gravatar.com/avatar/84f4c096772917877b45bdcb0c0a9fab?d=mm&r=g">
</div>
<div class="review-panel__cite">
<p class="review-panel__person">Benjamin Morrison</p>
<p class="review-panel__company">Web Designer</p>
</div>
</cite>
</blockquote>
</div>
<div class="row">
<div class="column u-center">
<a href="#" class="button secondary">Read more reviews</a>
</div>
</div>
</div>
{
"reviews": [
{
"title": "The editor we need, the interface we need, and the service we demand",
"review": "<p>We proudly use modmore's Redactor on all of our websites. <strong>Its simple, intuitive layout, is perfect for all types of clients and their respective experience and type of use.</strong></p><p>Our feedback is listened to, bugs (if any) are dealt with promptly, and the team at modmore are very approachable. Keep up the good work!</p>",
"person": "Graeme Leighfield",
"company": "Founder of Gel Studios",
"avatar": "https://www.gravatar.com/avatar/7bb3a95a90f2b8771b9aa283eacfd7f0?d=mm&r=g"
},
{
"title": "Introducing themes and dark mode",
"review": "<p>As a professional designer, none of my clients go without redactor as a standard feature in any site I build. <strong>Nothing beats the stability, ease of use, flexibility and customization of Redactor</strong>. Some say paying for a WYSIWYG isn't worth it, experience and the satisfaction of my clients says otherwise.</p>",
"person": "Benjamin Morrison",
"company": "Web Designer",
"avatar": "https://www.gravatar.com/avatar/84f4c096772917877b45bdcb0c0a9fab?d=mm&r=g"
}
]
}
/*------------------------------------*\
Review Panel
\*------------------------------------*/
.review-panel {
position: relative;
margin: 2rem 0;
padding: 0 1rem;
border: 0;
@include mq(large) {
margin: 4rem 0;
&:before {
content: '\201C';
position: absolute;
left: -45px;
top: 6px;
color: $color-charcoal;
font-size: 100px;
}
}
}
.review-panel__stars {
display: flex;
margin-bottom: 20px;
}
.review-panel__star {
width: 25px;
height: 25px;
color: $color-primary;
}
.review-panel p {
font-size: 1.1rem;
}
.review-panel__footer {
display: flex;
align-items: center;
margin-top: 1rem;
p {
margin: 0;
line-height: 1.3;
font-style: normal;
}
}
.review-panel__person {
font-weight: bold;
font-size: 1rem;
}
.review-panel__company {
font-size: 0.9rem;
color: $color-charcoal;
}
.review-panel__avatar {
border-radius: 100%;
margin-right: 1rem;
width: 70px;
height: 70px;
}