<div class="reviews border-bottom border-primary border-2 py-4 d-flex align-items-stretch justify-content-between flex-wrap swiper position-relative">
<div class="swiper-wrapper">
<div class="review px-3 border-end swiper-slide">
<p class="review--rating d-flex my-0 fs-4" aria-label="Five stars">
<svg>
<use xlink:href="#star"></use>
</svg>
<svg>
<use xlink:href="#star"></use>
</svg>
<svg>
<use xlink:href="#star"></use>
</svg>
<svg>
<use xlink:href="#star"></use>
</svg>
<svg>
<use xlink:href="#star"></use>
</svg>
</p>
<p class="review--excerpt my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></p>
<p class="review--attribution my-0 fw-bolder">The Stage</p>
</div>
<div class="review px-3 border-end swiper-slide">
<p class="review--rating d-flex my-0 fs-4" aria-label="One star">
<svg>
<use xlink:href="#star"></use>
</svg>
</p>
<p class="review--excerpt my-1">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br></p>
<p class="review--attribution my-0 fw-bolder">The Stage</p>
</div>
<div class="review px-3 border-end swiper-slide">
<p class="review--excerpt my-1">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br></p>
<p class="review--attribution my-0 fw-bolder">The Stage</p>
</div>
<div class="review px-3 border-end swiper-slide">
<p class="review--rating d-flex my-0 fs-4" aria-label="Four stars">
<svg>
<use xlink:href="#star"></use>
</svg>
<svg>
<use xlink:href="#star"></use>
</svg>
<svg>
<use xlink:href="#star"></use>
</svg>
<svg>
<use xlink:href="#star"></use>
</svg>
</p>
<p class="review--excerpt my-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br></p>
<p class="review--attribution my-0 fw-bolder">The Stage</p>
</div>
<div class="review px-3 border-end swiper-slide">
<p class="review--excerpt my-1">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br></p>
<p class="review--attribution my-0 fw-bolder">The Stage</p>
</div>
</div>
<span class="reviews--next swiper-button-next position-absolute align-items-center justify-content-center fs-2" aria-label="Next review slide">></span>
</div>
<div class="reviews border-bottom border-primary border-2 py-4 d-flex align-items-stretch justify-content-between flex-wrap swiper position-relative">
<div class="swiper-wrapper">
{% for review in reviews %}
{% render '@review-card' with review %}
{% endfor %}
</div>
<span class="reviews--next swiper-button-next position-absolute align-items-center justify-content-center fs-2" aria-label="Next review slide">></span>
</div>
{
"reviews": [
{
"rating": 5,
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n",
"attribution": "The Stage"
},
{
"rating": 1,
"excerpt": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n",
"attribution": "The Stage"
},
{
"rating": null,
"excerpt": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\n",
"attribution": "The Stage"
},
{
"rating": 4,
"excerpt": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n",
"attribution": "The Stage"
},
{
"rating": null,
"excerpt": "Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum\n",
"attribution": "The Stage"
}
]
}
.reviews {
&--next {
display: none;
@include media-breakpoint-up(md) {
display: flex;
top: 0;
right: 0;
bottom: 0;
width: 2rem;
z-index: 1;
}
}
.review {
width: 75%;
@include media-breakpoint-up(md) {
padding-right: 3rem !important;
width: calc(1 / 3) * 100%;
}
}
}
No notes defined.