<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 adipisicing elit. Animi fugit incidunt culpa deserunt molestias ipsam eius nisi cupiditate nam asperiores!<br></p>
<p class="review--attribution my-0 fw-bolder">The Stage</p>
</div>
{% if rating == 5 %}
{% set rating_text = 'Five stars' %}
{% elseif rating == 4 %}
{% set rating_text = 'Four stars' %}
{% elseif rating == 3 %}
{% set rating_text = 'Three stars' %}
{% elseif rating == 2 %}
{% set rating_text = 'Two stars' %}
{% else %}
{% set rating_text = 'One star' %}
{% endif %}
<div class="review px-3 border-end swiper-slide">
{% if rating is defined and rating is not empty %}
<p class="review--rating d-flex my-0 fs-4" aria-label="{{ rating_text }}">
{% for i in range(1, rating) %}
<svg>
<use xlink:href="#star"></use>
</svg>
{% endfor %}
</p>
{% endif %}
<p class="review--excerpt my-1">{{ excerpt | replace({"\n": '<br>'}) | raw }}</p>
<p class="review--attribution my-0 fw-bolder">{{ attribution }}</p>
</div>
{
"rating": 5,
"excerpt": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi fugit incidunt culpa deserunt molestias ipsam eius nisi cupiditate nam asperiores!\n",
"attribution": "The Stage"
}
.review {
--bs-border-color: var(--bs-gray-400);
&--rating {
svg {
width: 1.8rem;
height: 1.8rem;
use {
fill: $primary;
stroke: $secondary;
}
}
}
}
No notes defined.