<blockquote class="Blockquote" style="">Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.</blockquote>
<blockquote class="{{modifier}}" style="{{style}}">{{{text}}}</blockquote>
{
"text": "Perferendis magnam deserunt eligendi et dolores et cupiditate dolorum omnis. Ullam ipsa dolores et dolores repellat repellendus dolorum laboriosam.",
"style": null,
"modifier": "Blockquote"
}
blockquote {
@include font-size-lead;
position: relative;
&._small {
@include font-size-large;
}
&._large {
@include font-size-subhead;
}
&::before,
&::after {
speak: none;
}
&::before {
position: absolute;
left: -.5em;
content: "\201C";
}
&::after {
content: "\201D";
}
@media #{$mobile-media} {
&::before {
position: static;
}
}
}
.Blockquote {
max-width: 100%;
padding: 0;
border: none;
&-quote {
@include font-size-subhead;
display: inline;
font-family: $font-family-blockquote;
&::before {
position: absolute;
left: -.75rem;
content: "“";
}
&::after {
content: "”";
}
}
&-link {
@include triangle-dingus($container-side: "left", $side-position: "center", $size: 6px, $color: get-color(neutral, 300));
position: relative;
display: inline-block;
padding: .25rem;
margin-top: 0;
margin-left: .75rem;
color: theme-color(text, inverse);
background: get-color(neutral, 300);
border-radius: $Border-radius--500;
.icon::after {
display: block;
}
&:hover {
text-decoration: none;
background: get-network-color(twitter);
&::before {
border-right-color: get-network-color(twitter);
}
}
}
&-cite {
@include font-size-small;
display: block;
margin-top: 1.5rem;
margin-bottom: 0;
font-style: normal;
a {
@include font-weight-semibold;
@include font-size-fine;
}
}
// This is to overwrite global `<blockquote>` styles
&::before,
&::after {
content: "";
}
}
.Blockquote--bigQuotation {
&::before,
&::after {
display: inline-block;
color: theme-color(main);
transform: scale(2.5) translateY(12%);
}
&::before {
padding-right: Space(300);
content: "“";
}
&::after {
padding-left: Space(300);
content: "”";
}
}
There are no notes for this item.