There are no notes for this item.

<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"
    }
  ]
}
  • Content:
    /*------------------------------------*\
    	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;
    }
    
  • URL: /components/raw/review-panel/review-panel.scss
  • Filesystem Path: components/02-components/review-panel/review-panel.scss
  • Size: 934 Bytes