Since we can’t nest elements in carrousel, we need a way to add classes to the different fields.
For instance, I want to use my utility class to add quotes to testimonials:
I guess for simple things I could use root .content-wrapper > :first-child
, but it’s a bit annoying when CSS is a more complex:
/*=============================================
= Quotes =
=============================================*/
[class*="quote--"], blockquote p {
font-style: italic;
}
[class*="quote--"], blockquote {
position: relative;
z-index: 0;
}
[class*="quote--"]::before, [class*="quote--"]::after,
blockquote::before, blockquote::after {
position: absolute;
line-height: 0;
font-size: 7em;
color: var(--accent);
z-index: -1;
opacity: 0.5;
}
[class*="quote--"]::before, blockquote::before {
content: '\275d';
/*content: '\201c';*/
top: 5rem;
left: -1rem;
}
[class*="quote--"]::after, blockquote::after {
content: '\275e';
/*content: '\201d';*/
bottom: -1rem;
right: 2rem;
}
.quote--s::before, .quote--s::after {
font-size: 3em;
}
.quote--s::before {
top: 1rem;
left: -2rem;
}
.quote--s::after {
bottom: -1rem;
right: 1rem;
}
.quote--l, blockquote {
padding: var(--space-m) var(--space-xl);
}