No notes defined.
<div class="uol-article-highlight uol-content-switch-from-side-to-main">
<h2 class="uol-article-highlight__title">{{ article_highlight.title }}</h2>
{% if article_highlight.subtitle %}
<p class="uol-article-highlight__subtitle">{{ article_highlight.subtitle }}</p>
{% endif %}
<p class="uol-article-highlight__paragraph">{{ article_highlight.paragraph }}</p>
</div>
<div class="uol-article-highlight uol-content-switch-from-side-to-main">
<h2 class="uol-article-highlight__title">The author/s</h2>
<p class="uol-article-highlight__subtitle">Author name and title</p>
<p class="uol-article-highlight__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor convallis justo consectetur aliquet. Sed mollis pretium elit, ac commodo dolor tincidunt laoreet.</p>
</div>
.uol-article-highlight {
font-variant-numeric: lining-nums;
background-color: $color-brand--faded;
padding: $spacing-5;
margin: $spacing-6 0;
@include media(">=uol-media-s") {
padding: $spacing-5 calc(100% / 12);
}
@include media(">=uol-media-m") {
margin: $spacing-7 0;
}
@include media(">=uol-media-l") {
margin: $spacing-5 0 $spacing-7;
padding: $spacing-5;
}
}
.uol-article-highlight__title {
@extend %text-size-heading-3;
@extend %uol-font-serif--bold;
margin: 0 0 $spacing-2;
}
.uol-article-highlight__subtitle {
@extend .uol-typography-paragraph;
@extend %uol-font-sans-serif--bold;
font-weight: $font-weight-medium--sans-serif;
margin: $spacing-2 0 $spacing-3;
}
.uol-article-highlight__paragraph {
@extend .uol-typography-paragraph;
margin: $spacing-3 0 0;
}
{
"article_highlight": {
"title": "The author/s",
"subtitle": "Author name and title",
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor convallis justo consectetur aliquet. Sed mollis pretium elit, ac commodo dolor tincidunt laoreet."
}
}