<figure class="bux-quote">
<img class="bux-image bux-quote__image bux-image--1x1" src="/images/placeholders/osu-bux-4.jpg" alt="Portrait of a woman." />
<blockquote class="bux-quote__blockquote" cite="#">
<p class="bux-quote__text">“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit amet elit.”</p>
</blockquote>
<figcaption class="bux-quote__figcaption">
<div class="bux-quote__author">Source Name</div>
<cite class="bux-quote__source">Attribution</cite>
</figcaption>
</figure>
{#
Quote
Available variables:
- items: Array containing the quote items
- item.image_url: URL for the quote's image.
- item.image_alt: Alt text for the quote's image.
- item.cite: URL for source attribution.
- item.text: Content of the quote.
- item.source: String for the quote's source.
- item.attribution: String for the quote's attribution.
#}
{% for item in items %}
<figure class="bux-quote">
{% if item.image_url %}
{% set image_url = item.image_url %}
{% set image_alt_text = item.image_alt %}
{% set class = "bux-quote__image bux-image--1x1" %}
{% include '@image' %}
{% endif %}
<blockquote class="bux-quote__blockquote" {% if item.cite %}cite="{{ item.cite }}"{% endif %}>
<p class="bux-quote__text">“{{ item.text }}”</p>
</blockquote>
<figcaption class="bux-quote__figcaption">
<div class="bux-quote__author">{{ item.source }}</div>
<cite class="bux-quote__source">{{ item.attribution }}</cite>
</figcaption>
</figure>
{% endfor %}
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
items:
- image_url: /images/placeholders/osu-bux-4.jpg
image_alt: Portrait of a woman.
cite: '#'
text: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium
pretium tempor ut eget loremquen ipsum imperdiet. Lorem ipsum dolar sit
amet elit.
source: Source Name
attribution: Attribution
.bux-quote {
display: grid;
border-left: 4px solid $scarlet;
padding: 0 0 0 $sp-32;
column-gap: $sp-24;
grid-template-columns: 1fr;
grid-template-rows:
[blockquote] auto
[figcaption] auto;
&:has(img), &:has(picture), &.bux-quote--has-image {
grid-template-rows:
[image] minmax(max-content, 100px)
[blockquote] auto
[figcaption] auto;
@include breakpoint(md) {
grid-template-columns:
[image] minmax(max-content, 100px)
[text] 1fr;
grid-template-rows:
[blockquote] auto
[figcaption] auto;
}
}
@include breakpoint(md) {
grid-template-columns: [text] 1fr;
grid-template-rows:
[blockquote] auto
[figcaption] auto;
}
.bux-quote__image {
grid-column: 1;
grid-row: image;
max-width: 100px;
margin-bottom: $sp-24;
@include breakpoint(md) {
grid-column: image;
grid-row: #{1 / span all};
}
}
.bux-quote__blockquote {
grid-column: 1;
grid-row: blockquote;
margin-bottom: $sp-16;
@include breakpoint(md) {
grid-column: text;
grid-row: blockquote;
}
.bux-quote__text {
font-family: $serif;
font-size: $ts-md;
font-weight: 900;
line-height: rem-calc(32);
margin: 0;
}
}
.bux-quote__figcaption {
display: grid;
grid-column: 1;
grid-row: figcaption;
@include breakpoint(md) {
grid-column: text;
grid-row: figcaption;
}
.bux-quote__author {
font-family: $sans;
font-size: $ts-18;
font-weight: 700;
}
.bux-quote__source {
font-family: $sans;
font-size: $ts-18;
}
}
}
{
function setFontSize(quote) {
const quoteText = quote.querySelector(".bux-quote__text");
const quoteTextLength = quoteText.innerText.trim().length;
if (quoteTextLength >= 150) {
const quoteAuthor = quote.querySelector(".bux-quote__author");
const quoteSource = quote.querySelector(".bux-quote__source");
quoteText.style.fontSize = "1.125rem";
quoteText.style.lineHeight = "1.75rem";
if (quoteAuthor) {
quoteAuthor.style.fontSize = "1rem";
}
if (quoteSource) {
quoteSource.style.fontSize = "1rem";
}
}
}
function initializeQuotes() {
const quotes = document.querySelectorAll(".bux-quote");
quotes.forEach((quote) => {
setFontSize(quote);
});
}
document.addEventListener("DOMContentLoaded", initializeQuotes());
}
No notes defined.