No notes defined.
<blockquote class="uol-typography-blockquote" {% if cite.url %} cite="{{ cite.url }}" {% endif %}>
{{ content | safe }}
{% if cite.content %}
<footer>
<cite>
{% if cite.url %} <a href="{{ cite.url }}"> {% endif %}
{{ cite.content }}
{% if cite.url %} </a> {% endif %}
</cite>
</footer>
{% endif %}
</blockquote>
<blockquote class="uol-typography-blockquote" cite="https://designsystemfoundations.com/">
<p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>
<footer>
<cite>
<a href="https://designsystemfoundations.com/">
Andrew Couldwell, Laying the Foundations
</a>
</cite>
</footer>
</blockquote>
.uol-typography-blockquote {
@extend %text-size-blockquote;
@extend %uol-font-serif;
font-weight: $font-weight-bold--serif;
position: relative;
margin: 2em 0 1em;
padding: 0 1.75em;
@include media(">=uol-media-m") {
padding: 0 1.7em;
}
@include media(">=uol-media-l") {
padding: 0 1.5em;
}
&::before {
content: "\201C";
@extend %uol-font-serif--bold;
font-size: 400%;
height: 1ex;
display: block;
position: absolute;
top: -0.125em;
left: 0;
color: $color-brand;
line-height: 0.3 !important;
}
p {
@extend %text-size-blockquote;
margin-bottom: 0.5em;
}
footer {
@extend %text-size-caption;
cite {
@extend %uol-font-sans-serif--italic;
color: $color-font--x-light;
a {
color: inherit;
&:hover,
&:focus {
color: $color-font;
text-decoration-color: $color-brand;
}
}
}
}
}
{
"content": "<p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>",
"cite": {
"content": "Andrew Couldwell, Laying the Foundations",
"url": "https://designsystemfoundations.com/"
}
}