<figure class="c-quote">
<blockquote class="c-quote__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni consequuntur vel unde ab aut, consequatur id nam. Ipsum aut beatae commodi recusandae vel, eaque distinctio voluptatibus illum ducimus inventore!</blockquote>
<figcaption class="c-quote__author">
<p class="c-quote__author-name">Elena Rossi</p>
<p class="c-quote__author-role">Internet Project & E-commerce</p>
</figcaption>
</figure>
<figure class="c-quote{% if modifier is defined %} {{ modifier }}{% endif %}">
<blockquote class="c-quote__text">{{ text }}</blockquote>
<figcaption class="c-quote__author">
<p class="c-quote__author-name">{{ authorName }}</p>
<p class="c-quote__author-role">{{ authorRole }}</p>
</figcaption>
</figure>
{
"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni consequuntur vel unde ab aut, consequatur id nam. Ipsum aut beatae commodi recusandae vel, eaque distinctio voluptatibus illum ducimus inventore!",
"authorName": "Elena Rossi",
"authorRole": "Internet Project & E-commerce"
}
.c-quote,
blockquote:not(.c-quote__text) {
margin: spacing(space-24) 0;
padding-left: spacing(space-24);
border-left: remify(4px) solid useHSL(--primary-100);
@include min-screen(bp(medium)) {
margin: spacing(space-48) 0;
}
}
/* Aggiunge virgolette aperte agli elementi `<blockquote>` o ai primi figli `<p>` senza classe. */
.c-quote__text,
.c-quote__text p:first-child {
&::before {
content: "\201C";
margin-right: spacing(space-4);
}
}
/* Aggiunge virgolette chiuse agli elementi `<blockquote>` o agli ultimi figli `<p>` senza classe. */
.c-quote__text,
.c-quote__text p:last-child {
&::after {
content: "\201D";
margin-left: spacing(space-4);
}
}
/* Nasconde le virgolette nei `<blockquote>` che contengono `<p>` senza classi per evitare duplicazioni delle virgolette */
.c-quote__text:has(p:not([class])) {
&::before,
&::after {
display: none;
}
}
.c-quote__text {
@include font-scale(level-3, $font-primary, regular);
color: useHSL(--primary-100);
margin-bottom: spacing(space-24);
p + p {
margin-top: remify(16px);
}
}
.c-quote__author {
color: useHSL(--primary-100);
@include min-screen(bp(medium)) {
display: flex;
}
}
.c-quote__author-name {
@include font-scale(level-2, $font-secondary, bold);
}
.c-quote__author-role {
@include font-scale(level-2, $font-secondary, light);
@include min-screen(bp(medium)) {
&:before {
content: '-';
margin: 0 spacing(space-8);
}
}
}
No notes defined.