lazy style testimonials based on same BigchainDB component

assets/_src/less/ascribe.less

@@ -30,6 +30,7 @@
 @import 'ascribe/_feature-circles.less';
 @import 'ascribe/_team.less';
 @import 'ascribe/_blog.less';
+@import 'ascribe/_testimonials.less';
 
 @import '_page-api.less';
 

assets/_src/less/ascribe/_testimonials.less

@@ -0,0 +1,95 @@
+
+
+.testimonials {
+    background: @greyBg;
+    margin-bottom: 0;
+
+    .row { background: none; }
+
+    .grid__col {
+        display: flex;
+        flex-wrap: wrap;
+    }
+}
+
+.testimonial {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.testimonial__quote,
+.testimonial__caption {
+    flex: 0 0 100%;
+}
+
+.testimonial__quote {
+    // blockquote reset
+    margin: 0;
+    position: relative;
+    border: none;
+    color: @text-color;
+    padding: 0;
+    font-style: normal;
+
+    // styling
+    &:extend(.bold);
+    padding: (@spacer / 2);
+    align-self: flex-start;
+    background: #fff;
+
+    // quote characters
+    // &:before {
+    //     content: "“";
+    //     font-size: 250%;
+    //     color: @greyHr;
+    //     line-height: 0;
+    //     margin-left: -1em;
+    // }
+}
+
+.testimonial__caption {
+    align-self: flex-end;
+    display: flex;
+    align-items: center;
+    border-top: 2px solid @greySocial;
+    padding-top: (@spacer / 2);
+    position: relative;
+
+    // speech triangle
+    &:before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        left: 4em;
+        top: 0;
+        border-width: .9em .9em 0 0;
+        border-color: transparent;
+        border-top-color: @greySocial;
+    }
+}
+
+.testimonial__avatar {
+    width: 4em;
+    height: 4em;
+    display: inline-block;
+    margin-right: @spacer;
+    border-radius: 50%;
+    border: 2px solid @greySocial;
+}
+
+.testimonial__cite {
+    &:extend(.small);
+    font-style: normal;
+    flex: 1;
+    color: @greySocial;
+}
+
+.testimonial__name {
+    font-weight: @font-weight-bold;
+}
+
+.testimonial__org {
+    display: block;
+}

controller/classes/Subtemplate.php

@@ -1216,11 +1216,13 @@ class Subtemplate {
             }
         }
 
-        $result = "<section class='subtemplate row'>
+        $result = "<section class='subtemplate testimonials'>
-                        <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
+                        <div class='row'>
-                        <article class='testimonials grid grid--full grid-medium--fit grid--gutters'>
+                            <h1 class='subtemplate__title'>{$subtemplateTitle}</h1>
-                            {$testimonialMarkup}
+                            <article class='grid grid--full grid-medium--fit grid--gutters'>
-                        </article>
+                                {$testimonialMarkup}
+                            </article>
+                        </div>
                     </section>";
 
         return $result;