<div class="o-container o-container--large c-quote">
<div class="o-box o-box--gradient">
<h3 class="c-quote__heading">Témoignage</h3>
<blockquote>
<span class="c-quote__text">Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.</span>
<footer class="c-quote__footer">
<img class="c-avatar c-quote__avatar" src="https://source.unsplash.com/100x100/?face" alt="This is an avatar" itemprop="image">
<span class="c-quote__reference">
<span class="c-quote__reference-item">
<span class="u-visually-hidden">Auteur: </span>Titre Prénom Nom
</span>
<span class="c-quote__reference-item">
<span class="u-visually-hidden">, Fonction: </span>Fonction
</span>
</span>
</footer>
</blockquote>
</div>
</div>
<div class="o-container o-container--large c-quote">
<div class="o-box o-box--gradient">
{% if heading %}<h3 class="c-quote__heading">Témoignage</h3>{% endif %}
<blockquote>
<span class="c-quote__text">{{ quote }}</span>
{% if reference %}
<footer class="c-quote__footer">
{% if reference.avatar %}
{% render '@avatar', { styleModifier: "c-quote__avatar" }, true %}
{% endif %}
<span class="c-quote__reference">
{% if reference.author -%}
<span class="c-quote__reference-item">
<span class="u-visually-hidden">Auteur: </span>{{ reference.author }}
</span>
{%- endif %}
{% if reference.function -%}
<span class="c-quote__reference-item">
<span class="u-visually-hidden">, Fonction: </span>{{ reference.function }}
</span>
{%- endif %}
{% if reference.cite -%}
<cite class="c-quote__reference-item">{{ reference.cite }}</cite>
{%- endif %}
</span>
</footer>
{% endif %}
</blockquote>
</div>
</div>
{
"quote": "Lorem ipsum dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole celiac swag. Brunch raclette vexillologist post-ironic glossier ennui XOXO mlkshk godard pour-over blog tumblr humblebrag. Blue bottle put a bird on it twee prism biodiesel brooklyn. Blue bottle ennui tbh succulents.",
"reference": {
"type": "https://schema.org/Book",
"cite": false,
"avatar": true,
"author": "Titre Prénom Nom",
"function": "Fonction"
},
"heading": "Témoignage"
}
/* ======================================================================
# _components.quotes.css
====================================================================== */
.c-quote {
@apply
text-center
;
}
/* -----------------------------------
# Heading
----------------------------------- */
.c-quote__heading {
@extend %caption;
@apply
my-4
uppercase
text-black
;
}
/* -----------------------------------
# Text
----------------------------------- */
/***
* Size has to be the same as `u-h2`
* 1. add an unbreakable space
*/
.c-quote__text {
@extend %h2;
@apply
inline-block
max-w-prose
text-black
;
}
.c-quote__text::before {
content: "«";
@apply
mr-1 /* [1] */
;
}
.c-quote__text::after {
content: "»";
@apply
ml-1 /* [1] */
;
}
/* -----------------------------------
# Footer
----------------------------------- */
.c-quote__footer {
@apply
mt-4
flex
flex-col
items-center
;
}
.c-quote__avatar {
@apply
mt-8
;
}
/* -----------------------------------
# Reference
----------------------------------- */
.c-quote__reference {
@extend %caption;
@apply
mt-4
uppercase
not-italic
;
}
.c-quote__reference-item {
@apply
block
;
}
No notes defined.