Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/typography.html#blockquote-sec
This component is designed to be a full-width (Section) level component. There are four different variants to utilize. Future iterations may introduce more color variations (background colors).
<section class="blockquote-wrapper orange-a11y-bg pt-5 pb-5">
<div class="container">
<div class="blockquote-heading">
<h3>A True Learning Community</h3>
</div>
<div class="image-content-wrapper">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="image_wrapper">
<img class="clip-mask-top-right" src="../../college-dls/college/images/true-learning-community.png" alt="Community Image">
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="image-right-content">
<figure>
<blockquote class="blockquote">“Lorem ipsum dolor sit amet,
consectetur
adipiscing elit. Maecenas tincidunt urna a porta lobortis. Aliquam sit amet eros quam.”
</blockquote>
<footer class="blockquote-footer"><strong>Jane Doe,</strong> Alumni, Alvarez School of Business 2019</footer>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
/* components/01-visual-styling/03-typography/06-blockquote/blockquote.scss */
/* BEGIN blockquote.scss */
.blockquote-wrapper {
// padding-top:
// padding-top: 98px;
// padding-bottom: 138px;
color: $blue;
&.grey-bg {
color: $orange-a11y;
.blockquote-heading {
color: $blue;
}
.blockquote {
color: $orange-a11y;
}
.blockquote-footer {
color: $blue;
}
}
&.blue-bg {
color: $orange;
.blockquote-heading h3 {
color: $white;
}
.blockquote-footer {
color: $white;
}
}
&.orange-a11y-bg {
color: $blue;
.blockquote-heading {
color: $white;
}
.blockquote-footer {
color: $white;
}
}
.image_wrapper>img {
width: 100%;
height: 100%;
}
.blockquote-heading h3 {
font-size: 2.2rem;
font-weight: 700;
padding-bottom: 2.4rem;
}
.blockquote-footer {
margin-top: 10px;
font-weight: bold;
font-size: 15px;
letter-spacing: 3px;
text-transform: uppercase;
}
.blockquote {
font-size: 37px;
font-weight: bold;
line-height: 44px;
}
.author-information {
color: $blue;
font-size: 15px;
letter-spacing: 3px;
text-transform: uppercase;
}
.image-right-content h4 {
font-size: 33px;
line-height: 40px;
}
.image-right-content h3 {
font-size: 37px;
line-height: 44px;
}
.image-right-content>.blockquote {
margin-bottom: 26px;
}
@include media-breakpoint-up(xl) {
.image_wrapper {
padding-right: 30px;
}
}
@include media-breakpoint-down(lg) {
padding-top: 45px;
padding-bottom: 45px;
.blockquote-heading {
margin-bottom: 30px;
}
.blockquote {
font-size: 24px;
line-height: normal;
}
}
}
.blockquote-inline{
padding-bottom: 1rem;
p{
font-size: 1.25rem !important;
}
p:first-child{
font-weight: bold;
font-weight: 700 !important;
padding-bottom: 1rem;
&:before{
content: '';
display: block;
width: 100%;
height: 1px;
background-color: $grey;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
}
p:last-child{
color: $black;
text-transform: uppercase;
font-family: ff-meta-web-pro, sans-serif;
&:before{
content: "— ";
}
&:after{
content: '';
display: block;
width: 100%;
height: 1px;
background-color: $grey;
margin-top: 1.5rem;
}
}
}
/* Dark Mode - Component Styles - Blockquotes */
@include color-mode(dark) {
.blockquote-heading h3 {
color: $orange;
}
.blockquote-wrapper .blockquote {
color:$grey;
}
.blockquote-wrapper .blockquote-footer {
color: $white;
}
.blockquote-wrapper {
&.grey-bg {
.blockquote {
color: $orange-a11y;
}
.blockquote-footer {
color: $blue;
}
.blockquote-heading {
h2, h3 {
color: $blue;
}
}
}
&.blue-bg {
.blockquote {
color: $orange;
}
.blockquote-footer {
color: $white;
}
.blockquote-heading {
h2, h3 {
color: $orange;
}
}
}
&.orange-a11y-bg {
.blockquote {
color: $blue;
}
.blockquote-footer {
color: $white;
}
.blockquote-heading {
h2, h3 {
color: $blue;
}
}
}
}
.blockquote-inline{
p:last-child{
color: $white;
}
}
}
/* Component Styles - Blockquotes END */
/* END blockquote.scss */
<section class="blockquote-wrapper orange-a11y-bg pt-5 pb-5">
<div class="container">
<div class="blockquote-heading">
<h3>A True Learning Community</h3>
</div>
<div class="image-content-wrapper">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="image_wrapper">
<img class="clip-mask-top-right"
src="{{path '/college-dls/college/images/true-learning-community.png' }}"
alt="Community Image">
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="image-right-content">
<figure>
<blockquote class="blockquote">“Lorem ipsum dolor sit amet,
consectetur
adipiscing elit. Maecenas tincidunt urna a porta lobortis. Aliquam sit amet eros quam.”
</blockquote>
<footer class="blockquote-footer"><strong>Jane Doe,</strong> Alumni, Alvarez School of Business 2019</footer>
</figure>
</div>
</div>
</div>
</div>
</div>
</section>