There are no notes for this item.
<div class="testimonial">
<div class="container">
<div class="testimonial__row">
<div class="testimonial__asset">
<img class="testimonial__image" src="http://dummyimage.com/900x900/ff675b/fff.png&text=Company logo or headshot" alt="" title="" style="">
</div>
<div class="testimonial__content">
<blockquote class="testimonial__quote">
It was an honor to work with Imarc. They demonstrated, very early on, a true ability to understand our business and solve for our needs—create a new intranet site, one that would increase engagement and foster community. Imarc delivered incredible results, taking our former site to new heights. We couldn’t be happier with their work and subject matter expertise.
</blockquote>
<p class="testimonial__attribution">
– John Smith, Chief Marketing Officer, Acme Co
</p>
</div>
</div>
</div>
</div>
///
/// The TESTIMONIAL mixin is a basic implementation of a testimonial design.
/// Add in an optional image wrapped in an element with a class of .asset.
///
/// $gutterWidth
/// Contributes to gutter width between image and text.
/// $background
/// Background color.
/// $text-color
/// Text color.
/// $attribution-text
/// Attribution text color.
///
@mixin testimonial (
$gutterWidth: 4rem,
$background: $gray-900,
$text-color: $white,
$attribution-text: $meta-text
) {
background-color: $background;
margin-bottom: 4rem;
padding: 4rem 0 4rem;
text-align: center;
&__asset {
margin-bottom: 2rem;
}
&__image {
max-width: 280px;
}
&__quote {
border: none;
color: $text-color;
font-size: 1.125rem;
margin-bottom: 1rem;
padding: 0 2.5rem;
position: relative;
&::before,
&::after {
color: $attribution-text;
font-family: Georgia, serif;
font-size: 3.375rem;
position: absolute;
}
&::before {
content: "“";
left: 0;
line-height: 1;
top: 0;
}
&::after {
content: "”";
line-height: 0;
right: 0;
bottom: 0;
}
}
&__attribution {
color: $attribution-text;
font-size: 0.875rem;
margin-bottom: 0;
padding: 0 2.5rem;
}
@include breakpoint(lg) {
text-align: left;
&__row {
display: flex;
justify-content: space-between;
}
&__asset {
flex-basis: 33%;
flex-shrink: 0;
margin-bottom: 0;
margin-right: $gutterWidth;
}
&__image {
max-width: 100%;
}
&__quote {
font-size: 1.5rem;
padding: 0 6rem;
&::before,
&::after {
font-size: 7rem;
}
}
&__attribution {
font-size: 1rem;
padding: 0 6rem;
}
}
}