<!-- NOTE: Inline styles should be removed before implimenting into a project -->
<div class="quote">
<blockquote>
<p class="quote__text">
<span class="u-sr-only">“</span> Use the blockquote element for longer and more complex quotes. Blockquotes can contain paragraphs, headings, and other text structure elements. The cite element is used to refer to the source of the quote.
<span class="u-sr-only">”</span>
</p>
<cite>Citation Name</cite>
</blockquote>
</div>
<div class="quote">
<blockquote>
<p class="quote__text">
<span class="u-sr-only">“</span> This quote utilizes a figcaption element instead of a cite element in order to show more detail about the source.
<span class="u-sr-only">”</span>
</p>
</blockquote>
<figcaption class="quote__citation-container">
<div class="quote__citation-image quote__citation-image--circle">
<img src="https://picsum.photos/300" alt="Random image">
</div>
<p class="quote__citation">
<span class="quote__citation-name">
<strong>Citation Name</strong>
</span>
<span class="quote__citation-title">Citation Title</span>
</p>
</figcaption>
</div>
<h3 style="margin-top: 50px;">Inline Quote</h3>
<p>For shorter quotes that are usually inline with a sentence, use the Quote element. This is a sentence that has a Quote element.
<q style="background-color: #dcdcdc">This is the quote element</q>
</p>
<!-- NOTE: Inline styles should be removed before implimenting into a project -->
{% for quote in quotes %}
<div class="quote">
<blockquote>
<p class="quote__text">
<span class="u-sr-only">“</span>
{{ quote.text }}
<span class="u-sr-only">”</span>
</p>
{% if not quote.image %}
<cite>{{ quote.citation }}</cite>
{% endif %}
</blockquote>
{% if quote.image %}
<figcaption class="quote__citation-container">
<div class="quote__citation-image quote__citation-image--circle">
<img
src="{{ quote.image.src }}"
alt="{{ quote.image.alt }}"
>
</div>
<p class="quote__citation">
<span class="quote__citation-name">
<strong>{{ quote.citation.name }}</strong>
</span>
<span class="quote__citation-title">{{ quote.citation.title }}</span>
</p>
</figcaption>
{% endif %}
</div>
{% endfor %}
<h3 style="margin-top: 50px;">Inline Quote</h3>
<p>For shorter quotes that are usually inline with a sentence, use the Quote element. This is a sentence that has a Quote element.
<q style="background-color: #dcdcdc">This is the quote element</q>
</p>
{
"quotes": [
{
"text": "Use the blockquote element for longer and more complex quotes. Blockquotes can contain paragraphs, headings, and other text structure elements. The cite element is used to refer to the source of the quote.",
"citation": "Citation Name"
},
{
"text": "This quote utilizes a figcaption element instead of a cite element in order to show more detail about the source.",
"image": {
"src": "https://picsum.photos/300",
"alt": "Random image"
},
"citation": {
"name": "Citation Name",
"title": "Citation Title"
}
}
]
}
// Quotes
//
// Markup: quotes.html
//
// Styleguide Components.Quotes
.quote {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 50px;
padding: 20px 40px;
width: 100%;
background-color: color(neutral, lighter);
&:first-of-type {
margin-top: 0;
}
blockquote {
margin: 0;
}
@include bem-e('citation-container') {
display: flex;
align-items: center;
justify-content: flex-start;
}
@include bem-e('citation-image') {
position: relative;
margin-right: 15px;
width: 50px;
height: 50px;
overflow: hidden;
@include bem-m('circle') {
border-radius: 50%;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}
@include bem-e('citation') {
display: flex;
flex-direction: column;
}
}
There are no notes for this item.