<blockquote class="blockquote ">
<svg class="icon blockquote__icon animation__target">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
</svg>
<div class="blockquote__content animation__target">
Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.
</div>
<div class="blockquote__cite animation__target">
<figure class="image blockquote__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<cite class="blockquote__cite-creds">
<span class="blockquote__name">Name Lastname, Assistant To The Manager</span>
<span class="blockquote__creds text-small">Telia</span>
</cite>
</div>
</blockquote>
<blockquote class="blockquote {{ modifier }} {{ class }}">
{% include '@icon' with {modifier: '', class: 'blockquote__icon animation__target', name: 'quote-24'} %}
{% if data.content %}
<div class="blockquote__content animation__target">
{{ data.content }}
</div>
{% endif %}
{% if data.author %}
<div class="blockquote__cite animation__target">
{% if data.author.image %}{% include '@image' with { modifier:'', class:'blockquote__image', data: data.author.image|srcset('100x100')} %}{% endif %}
<cite class="blockquote__cite-creds">
{% if data.author.name %}
<span class="blockquote__name">{{ data.author.name }}{% if data.author.position %}, {{ data.author.position }}{% endif %}</span>
{% endif %}
{% if data.author.company %}
<span class="blockquote__creds text-small">{{ data.author.company }}</span>
{% endif %}
</cite>
</div>
{% endif %}
</blockquote>
{
"language": "en-US",
"data": {
"content": "Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.",
"author": {
"image": true,
"name": "Name Lastname",
"position": "Assistant To The Manager",
"company": "Telia"
}
}
}
.blockquote__cite {
margin-top: 16px;
font-size: $font-size-base;
line-height: $line-height-base;
font-weight: $font-weight-regular;
display: block;
@include bp(sm-min) {
margin-top: 40px;
display: flex;
}
}
.blockquote__cite-creds {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 16px;
@include bp(sm-min) {
margin: 0;
}
}
.blockquote__image {
width: 48px;
height: 48px;
border-radius: $border-radius-round;
overflow: hidden;
margin-right: 24px;
@include bp(sm-min) {
width: 72px;
height: 72px;
}
}
.image__img {
.blockquote__image & {
border-radius: 50%;
}
}
.blockquote__content {
margin-top: 16px;
@include bp(sm-min) {
margin-top: 24px;
}
.blockquote--large & {
font-size: $font-size-quote-large-xs;
line-height: $line-height-quote-large-xs;
font-weight: $font-weight-medium;
@include bp(sm-min) {
font-size: $font-size-quote-large-lg;
line-height: $line-height-quote-large-lg;
}
}
}
.blockquote__icon {
font-size: 24px;
display: block;
}
.blockquote__creds,
.blockquote__name {
font-size: $font-size-small;
line-height: $line-height-small;
}
.blockquote__name {
@include bp(sm-min) {
font-size: $font-size-base;
line-height: $line-height-base;
}
}
import './blockquote.scss';
<blockquote class="blockquote blockquote--large ">
<svg class="icon blockquote__icon animation__target">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
</svg>
<div class="blockquote__content animation__target">
Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.
</div>
<div class="blockquote__cite animation__target">
<figure class="image blockquote__image">
<img loading="lazy" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3C%2Fsvg%3E" data-srcset="//via.placeholder.com/100x100 100w, //via.placeholder.com/200x200 200w, //via.placeholder.com/400x400 400w" data-sizes="auto" alt="" class="image__img lazyload">
</figure>
<cite class="blockquote__cite-creds">
<span class="blockquote__name">Name Lastname, Assistant To The Manager</span>
<span class="blockquote__creds text-small">Telia</span>
</cite>
</div>
</blockquote>
<blockquote class="blockquote {{ modifier }} {{ class }}">
{% include '@icon' with {modifier: '', class: 'blockquote__icon animation__target', name: 'quote-24'} %}
{% if data.content %}
<div class="blockquote__content animation__target">
{{ data.content }}
</div>
{% endif %}
{% if data.author %}
<div class="blockquote__cite animation__target">
{% if data.author.image %}{% include '@image' with { modifier:'', class:'blockquote__image', data: data.author.image|srcset('100x100')} %}{% endif %}
<cite class="blockquote__cite-creds">
{% if data.author.name %}
<span class="blockquote__name">{{ data.author.name }}{% if data.author.position %}, {{ data.author.position }}{% endif %}</span>
{% endif %}
{% if data.author.company %}
<span class="blockquote__creds text-small">{{ data.author.company }}</span>
{% endif %}
</cite>
</div>
{% endif %}
</blockquote>
{
"language": "en-US",
"data": {
"content": "Sometimes I’ll start a sentence and I don’t even know where it’s going. I just hope I find it along the way.",
"author": {
"image": true,
"name": "Name Lastname",
"position": "Assistant To The Manager",
"company": "Telia"
}
},
"modifier": "blockquote--large"
}
.blockquote__cite {
margin-top: 16px;
font-size: $font-size-base;
line-height: $line-height-base;
font-weight: $font-weight-regular;
display: block;
@include bp(sm-min) {
margin-top: 40px;
display: flex;
}
}
.blockquote__cite-creds {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 16px;
@include bp(sm-min) {
margin: 0;
}
}
.blockquote__image {
width: 48px;
height: 48px;
border-radius: $border-radius-round;
overflow: hidden;
margin-right: 24px;
@include bp(sm-min) {
width: 72px;
height: 72px;
}
}
.image__img {
.blockquote__image & {
border-radius: 50%;
}
}
.blockquote__content {
margin-top: 16px;
@include bp(sm-min) {
margin-top: 24px;
}
.blockquote--large & {
font-size: $font-size-quote-large-xs;
line-height: $line-height-quote-large-xs;
font-weight: $font-weight-medium;
@include bp(sm-min) {
font-size: $font-size-quote-large-lg;
line-height: $line-height-quote-large-lg;
}
}
}
.blockquote__icon {
font-size: 24px;
display: block;
}
.blockquote__creds,
.blockquote__name {
font-size: $font-size-small;
line-height: $line-height-small;
}
.blockquote__name {
@include bp(sm-min) {
font-size: $font-size-base;
line-height: $line-height-base;
}
}
import './blockquote.scss';