<div class="testimonial">
<div class="testimonial__text">
<p class="">
This variant isn't actually possible in Drupal but I'm testing it here just in case.
</p>
<cite>Edgar Rice Burroughs, <em>Princess of Mars</em></cite>
<a class="link--fancy" href="/admission-aid">Admission</a>
</div>
</div>
<div class="testimonial">
{% if testimonial.image is not empty %}
<div class="testimonial__media">
{% include '@image' with { image: testimonial.image } %}
</div>
{% endif %}
<div class="testimonial__text">
{% include testimonial.pattern with { p: testimonial.p } %}
{% include '@cite' with { cite: testimonial.cite } %}
<a class="link--fancy" href="/admission-aid">Admission</a>
</div>
</div>
{
"testimonial": {
"image": null,
"pattern": "@p",
"p": {
"content": "This variant isn't actually possible in Drupal but I'm testing it here just in case."
},
"cite": {
"citation": "Edgar Rice Burroughs, <em>Princess of Mars</em>"
}
}
}
.testimonial {
border: rr-gridbase(1) solid color(davidson-red);
@include rr-break-directive(m) {
display: flex;
margin-left: rr-gridbase(4);
margin-top: rr-gridbase(8);
}
}
.testimonial__media {
@include rr-break-directive(m) {
flex: 0 1 25%;
// add one for border width:
margin-left: rr-gridbase(-5);
margin-top: rr-gridbase(-5);
}
}
.testimonial__text {
@include rr-break-directive(m) {
flex: 1 1 75%;
}
@include rr-font-compute(xl, medium);
padding: rr-gridbase(4) rr-gridbase(5) rr-gridbase(5);
background: transparent image-url('ghost-quote.svg') scroll no-repeat rr-gridbase(1) 0;
p {
@include rr-font-compute(xl, medium);
font-style: italic;
&:first-child {
margin-top: 0;
}
}
cite {
display: block;
margin-bottom: 2rem;
&::before {
content: '—';
}
}
}
There are no notes for this item.