College Design Language System

Blockquote: Orange

Blockquote Documentation

Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/typography.html#blockquote-sec

Implementation Notes

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).

Media Requirements

  • Blockquote Image: The headshot image of the person in the blockquote. Our standard headshot image size is 420px (width) by 280px (height), 72 ppi (pixels per inch) jpeg or png.
    • Image should be no larger than 300kb (kilobytes)
<section class="blockquote-wrapper pt-5 pb-5 orange-a11y-bg">
    <figure class="p-5">
        <blockquote class="blockquote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a
            porta lobortis. ” </blockquote>
        <footer class="blockquote-footer"><strong>Jane Doe, Alumni,</strong> Alvarez School of Business 2019</footer>
    </figure>
</section>
  • Content: 
    /* 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 */
  • URL: /components/raw/blockquote/blockquote.scss
  • Filesystem Path: components/03-sections/06-blockquote/blockquote.scss
  • Size: 3.2 KB 
<section class="blockquote-wrapper pt-5 pb-5 orange-a11y-bg">
    <figure class="p-5">
        <blockquote class="blockquote">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tincidunt urna a
            porta lobortis. ” </blockquote>
        <footer class="blockquote-footer"><strong>Jane Doe, Alumni,</strong> Alvarez School of Business 2019</footer>
    </figure>
</section>