<div class="o-container o-container--large c-quote">
<div class="o-box o-box--gradient">
<blockquote>
<span class="c-quote__text">Si le chemin n'existe pas nous le créerons</span>
<footer class="c-quote__footer">
<span class="c-quote__reference">
<cite class="c-quote__reference-item">Hannibal, la traversée des alpes, -212 AJC</cite>
</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": "Si le chemin n'existe pas nous le créerons",
"reference": {
"type": "https://schema.org/Book",
"cite": "Hannibal, la traversée des alpes, -212 AJC"
}
}
/* ======================================================================
# _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.