<blockquote class="quote quote--color-blue-light quote--center">
<div class="quote__inner">
<h3 class="headline headline--module-3">„Jetzt, bei Single Cell, nimmt man den Smoothie, kann aber daraus ersehen, dass darin drei Erdbeeren und fünf Heidelbeeren enthalten sind; daher ist man jetzt in der Lage, sich einzelne Zellen anzuschauen, um zu sehen, was in ihnen vorgeht.“</h3>
<p class="bodytext">Laura Martens</p>
</div>
</blockquote>
#{tag || 'blockquote'}.quote(
class=classNames(
color && `quote--color-${color}`,
image && 'quote--image',
center && 'quote--center'
)
)&attributes(attr)
.quote__inner
if image
.quote__image
+include('@image', image)
if number
span.quote__number #{number}
if headline
+include('@headline', headline)
if text
+include('@paragraph', { text: text })
{
"headline": {
"size": "module-3",
"level": 3,
"text": "„Jetzt, bei Single Cell, nimmt man den Smoothie, kann aber daraus ersehen, dass darin drei Erdbeeren und fünf Heidelbeeren enthalten sind; daher ist man jetzt in der Lage, sich einzelne Zellen anzuschauen, um zu sehen, was in ihnen vorgeht.“"
},
"color": "blue-light",
"center": true,
"text": "Laura Martens"
}
.quote {
padding: 3rem 2rem;
position: relative;
@include mq($from: m) {
padding: 5rem 0 5rem 3rem;
}
@include mq($from: l) {
padding: 8rem 0 8rem 5rem;
}
}
.quote::before,
.quote::after {
content: '';
left: 0;
position: absolute;
width: 100%;
@include mq($from: m) {
width: 30rem;
}
@include mq($from: l) {
width: 40rem;
}
}
.quote::before {
height: calc(100% - 5rem);
top: 0;
@include mq($from: l) {
height: calc(100% - 8rem);
}
}
.quote::after {
background-position: right bottom;
background-size: auto 100%;
bottom: 0;
content: '';
height: 5rem;
@include mq($from: l) {
height: 8rem;
}
}
.quote--color-blue-light {
&::before {
background: $color-blue-light;
}
&::after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-blue-light + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
}
}
.quote--color-green {
&::before {
background: $color-green;
}
&::after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-green + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
}
}
.quote--color-violet {
&::before {
background: $color-violet;
}
&::after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-violet + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
}
}
.quote--color-turquoise {
&::before {
background: $color-turquoise;
}
&::after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-turquoise + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
}
}
.quote--color-yellow {
&::before {
background: $color-yellow;
}
&::after {
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 80"><defs/><path fill="' + $color-yellow + '" d="M0 80V0h800v-40h800V-.09a40 40 0 0 1-11.75 28.32l-40.2 40.09A40 40 0 0 1 1519.82 80H0z"/></svg>');
}
}
.quote--center {
padding: 0;
text-align: center;
&::before,
&::after {
display: none;
}
}
.quote .headline {
@include mq($until: m) {
hyphens: auto;
overflow-wrap: break-word;
word-wrap: break-word;
}
}
.quote--center.quote--color-blue-light .headline {
color: $color-blue-light;
}
.quote--center.quote--color-green .headline {
color: $color-green;
}
.quote--center.quote--color-violet .headline {
color: $color-violet;
}
.quote--center.quote--color-turquoise .headline {
color: $color-turquoise;
}
.quote--center.quote--color-yellow .headline {
color: $color-yellow;
}
.quote__inner {
position: relative;
z-index: 1;
}
.quote--image {
@include mq($until: m) {
padding: 3rem 2rem 4rem;
&::before {
height: calc(100% - 13.8rem);
top: 9rem;
}
}
@include mq($from: m) {
min-height: 36rem;
padding: 5rem 0 5rem 25rem;
&::before,
&::after {
left: 6.5rem;
}
}
@include mq($from: l) {
min-height: 42rem;
padding: 8rem 0 8rem 31rem;
}
}
.quote__image {
margin: -3rem 0 3.5rem;
max-width: 30rem;
@include mq($from: m) {
left: -25rem;
margin: 0.5rem 0 0;
max-width: 20rem;
position: absolute;
}
@include mq($from: l) {
left: -31rem;
max-width: 25rem;
}
}
.quote__image .image {
box-shadow: $box-shadow-default;
}
.quote__number {
display: inline-block;
font-family: $font-family-secondary;
font-size: 8rem;
font-weight: $font-weight-bold;
line-height: 1;
margin-bottom: 0.8rem;
@include mq($from: m) {
font-size: 12rem;
}
@include mq($from: l) {
font-size: 13rem;
}
}
.quote--image .quote__number {
@include mq($from: m) {
margin-top: -1rem;
}
@include mq($from: l) {
margin-top: -1.5rem;
}
}
.quote .bodytext {
margin-top: 0.5rem;
}
.quote--image .bodytext {
margin-top: 1.5rem;
}
.quote .bodytext a:not(.link) {
color: $color-blue;
@media(hover: hover) and (pointer: fine) {
&:hover {
text-decoration: underline;
}
}
}
There are no notes for this item.