The styling contained within this component are for use with untemplated content. This is content typically input using a WYSIWYG rich text editor such as CKEditor (Jadu), TinyMCE (WordPress), Gutenberg (WordPress), etc.
As we do not have the ability to readily add classes to text nodes (paragraphs, headings, lists, etc) in such editors we rely on styling based on their parent container. In the UoL Design System we use the .uol-rich-text class on the container for WYSIWYG output.
Where content is strongly templated, standard BEM-like Naming conventions should be used.
{# <h2> #}
<h2>Rich text area with gallery</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit doloribus tempora beatae voluptatem eos. Quam delectus id dignissimos eveniet impedit. Quisquam, at provident. Temporibus similique perferendis vitae eos, eum explicabo!</p>
<section class="uol-gallery-container" aria-label="Gallery of 6 items">
<div class="uol-gallery uol-gallery--count-6">
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">“Dual Form” by Barbara Hepworth</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29940.jpeg" alt="Dual Form sculpture by Barbara Hepworth with people relaxing on grass in background" data-src-high-quality="/placeholders/campus/full/29940.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">“Dual Form” by Barbara Hepworth</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Edward Boyle Library</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/28573.jpeg" alt="Steps outside Edward Boyle Library" data-src-high-quality="/placeholders/campus/full/28573.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, <a href='/some-text-link'>minus ea quod</a> quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Victoria Quarter Arcade, Leeds</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29936.jpeg" alt="Interior of Victoria Quarter Arcade" data-src-high-quality="/placeholders/campus/full/29936.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">Victoria Quarter</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, <a href='/some-text-link'>consequuntur recusandae? Ipsam</a>, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Reger Stevens building</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29921.jpeg" alt="Pond outside Roger Stevens building" data-src-high-quality="/placeholders/campus/full/29921.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur <a href='/some-text-link'>adipisicing elit</a>. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Great Hall</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/30092.jpeg" alt="The Great Hall viewed through Autumn trees" data-src-high-quality="/placeholders/campus/full/30092.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">The Great Hall is the focus for the University's ceremonial activities</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi <a href='/some-text-link'>nostrum blanditiis</a> hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Converse Column — Liliane Lijn</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29878.jpeg" alt="Sculpture with revolving text" data-src-high-quality="/placeholders/campus/full/29878.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">Converse Column — Liliane Lijn, 2019</figcaption>
</figure>
</div>
</div>
</section>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque, asperiores architecto? Natus, voluptates omnis facere excepturi aut, doloremque aliquid enim beatae delectus ipsum id explicabo officia quasi possimus, voluptatum deleniti?</p>
<p>Corrupti, a excepturi corporis ut minus quaerat ab. Facere consequuntur aliquid voluptate dolores voluptatem? Placeat odio doloribus delectus aperiam eligendi molestiae nostrum similique, in a error, incidunt impedit aliquid ullam?</p>
<p>Minus quam dolorum cum. Eius velit aperiam sequi, excepturi tempora officiis perspiciatis repudiandae eveniet earum recusandae, ut quod rem. Ipsum ea, ad quo aut cupiditate non quidem veniam quibusdam vitae?</p>
<p>Mollitia quam vel non, quaerat libero maiores dolorum hic, cupiditate accusantium voluptatibus inventore aut ratione sed quo perspiciatis pariatur nam corrupti quasi sunt debitis molestias! Vitae deleniti laboriosam laudantium? Quisquam.</p>
<p>At, distinctio beatae, nulla totam tenetur architecto, sequi eveniet aliquam delectus quod odio amet nisi! Eius, eos esse. Eveniet id quaerat explicabo laboriosam error maxime exercitationem unde impedit voluptas? Quo!</p>
<h2>Rich text area with gallery</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit doloribus tempora beatae voluptatem eos. Quam delectus id dignissimos eveniet impedit. Quisquam, at provident. Temporibus similique perferendis vitae eos, eum explicabo!</p>
<section class="uol-gallery-container" aria-label="Gallery of 6 items">
<div class="uol-gallery uol-gallery--count-6">
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">“Dual Form” by Barbara Hepworth</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29940.jpeg" alt="Dual Form sculpture by Barbara Hepworth with people relaxing on grass in background" data-src-high-quality="/placeholders/campus/full/29940.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">“Dual Form” by Barbara Hepworth</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Edward Boyle Library</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/28573.jpeg" alt="Steps outside Edward Boyle Library" data-src-high-quality="/placeholders/campus/full/28573.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, <a href='/some-text-link'>minus ea quod</a> quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Victoria Quarter Arcade, Leeds</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29936.jpeg" alt="Interior of Victoria Quarter Arcade" data-src-high-quality="/placeholders/campus/full/29936.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">Victoria Quarter</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, <a href='/some-text-link'>consequuntur recusandae? Ipsam</a>, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Reger Stevens building</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29921.jpeg" alt="Pond outside Roger Stevens building" data-src-high-quality="/placeholders/campus/full/29921.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur <a href='/some-text-link'>adipisicing elit</a>. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Great Hall</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/30092.jpeg" alt="The Great Hall viewed through Autumn trees" data-src-high-quality="/placeholders/campus/full/30092.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">The Great Hall is the focus for the University's ceremonial activities</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi <a href='/some-text-link'>nostrum blanditiis</a> hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Converse Column — Liliane Lijn</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29878.jpeg" alt="Sculpture with revolving text" data-src-high-quality="/placeholders/campus/full/29878.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">Converse Column — Liliane Lijn, 2019</figcaption>
</figure>
</div>
</div>
</section>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque, asperiores architecto? Natus, voluptates omnis facere excepturi aut, doloremque aliquid enim beatae delectus ipsum id explicabo officia quasi possimus, voluptatum deleniti?</p>
<p>Corrupti, a excepturi corporis ut minus quaerat ab. Facere consequuntur aliquid voluptate dolores voluptatem? Placeat odio doloribus delectus aperiam eligendi molestiae nostrum similique, in a error, incidunt impedit aliquid ullam?</p>
<p>Minus quam dolorum cum. Eius velit aperiam sequi, excepturi tempora officiis perspiciatis repudiandae eveniet earum recusandae, ut quod rem. Ipsum ea, ad quo aut cupiditate non quidem veniam quibusdam vitae?</p>
<p>Mollitia quam vel non, quaerat libero maiores dolorum hic, cupiditate accusantium voluptatibus inventore aut ratione sed quo perspiciatis pariatur nam corrupti quasi sunt debitis molestias! Vitae deleniti laboriosam laudantium? Quisquam.</p>
<p>At, distinctio beatae, nulla totam tenetur architecto, sequi eveniet aliquam delectus quod odio amet nisi! Eius, eos esse. Eveniet id quaerat explicabo laboriosam error maxime exercitationem unde impedit voluptas? Quo!</p>
.uol-rich-text {
@extend %uol-font-sans-serif;
max-width: 47.5rem;
color: $color-font;
> :first-child {
margin-top: 0;
}
> *,
> * > * {
max-width: 47.5rem;
}
img:not(.uol-logo-group-item__logo) {
width: 100%;
max-width: 47.5rem;
height: auto;
// margin-top: $spacing-6;
// margin-bottom: $spacing-6;
@include media(">=uol-media-l") {
// margin-top: $spacing-7;
// margin-bottom: $spacing-7;
}
}
h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
margin-top: $spacing-4;
@include media(">=uol-media-m") {
margin-top: $spacing-5;
}
}
p + ul {
margin-top: -16px !important;
}
.fluid-width-video-wrapper {
width: 100%;
max-width: none;
margin-top: $spacing-6;
margin-bottom: $spacing-6;
@include media(">=uol-media-m") {
margin-top: $spacing-7;
margin-bottom: $spacing-7;
}
iframe {
width: 100%;
max-width: none;
}
}
ul {
margin-top: 0;
}
figure {
width: 100%;
margin-bottom: $spacing-6;
@include media(">=uol-media-m") {
margin-top: $spacing-4;
margin-bottom: $spacing-7;
}
img {
margin-top: 0;
margin-bottom: 0;
}
}
strong {
@extend %uol-font-sans-serif--bold;
}
h1,
h2,
h3,
h4:not(.uol-in-text-fact__item__title),
h5,
h6 {
@extend %uol-font-serif;
font-weight: $font-weight-bold--serif;
font-variant-numeric: lining-nums;
margin: $spacing-6 0 $spacing-2;
@include media(">=uol-media-m") {
margin: $spacing-7 0 $spacing-4;
}
strong {
@extend %uol-font-serif--bold;
}
}
h1 {
@extend %text-size-heading-1;
}
h1.epic {
@extend %text-size-epic;
}
h2 {
@extend %text-size-heading-2;
}
h3 {
@extend %text-size-heading-3;
}
h4 {
@extend %text-size-heading-4;
}
h5 {
@extend %text-size-heading-5;
}
h6 {
@extend %text-size-heading-6;
}
p:not(.uol-in-text-fact__item__description):not(.uol-in-text-cta__text) {
@extend %text-size-paragraph;
margin-top: 0;
margin-bottom: $spacing-6;
}
// Change spacing of paragraph when its followed by an in-text-cta
p:has(+ .uol-in-text-cta) {
@include media("<uol-media-m") {
margin-bottom: $spacing-5 !important;
}
}
img + p {
margin-top: 0;
}
// paragraph followed by heading
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {
// margin added to paragraph bottom margin
// margin-top: 0;
// @include media(">=uol-media-m") {
// margin-top: 16px;
// }
}
blockquote {
@extend %text-size-blockquote;
@extend %uol-font-serif;
font-weight: $font-weight-bold--serif;
display: inline-block;
position: relative;
margin: $spacing-6 0;
padding: 0 1.75em;
@include media(">=uol-media-m") {
padding: 0 1.7em;
margin: $spacing-8 0 $spacing-7;
}
&::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;
@media (forced-colors: active) {
font-size: 300%;
}
}
&:first-child {
margin-top: $spacing-5;
@include media(">=uol-media-m") {
margin-top: $spacing-7;
}
@include media(">=uol-media-l") {
margin-top: $spacing-8;
}
}
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 {
@include link_focus();
color: inherit;
&:hover {
text-decoration-color: $color-brand;
}
}
}
}
}
hr {
@extend .uol-typography-hr;
}
ul,
ol {
@extend %text-size-paragraph;
padding-left: 35px; // 16px plus standard bullet width
margin-bottom: $spacing-5;
@include media(">=uol-media-m") {
padding-left: 51px; // 32px plus standard bullet width
}
li {
margin-bottom: $spacing-2;
}
ul,
ol {
margin-top: 0.5em;
margin-bottom: 0;
:first-child {
margin-top: 0.5em;
}
}
}
ol {
list-style: none;
counter-reset: item;
> li {
position: relative;
counter-increment: item;
&::before {
@extend %uol-font-sans-serif--bold;
content: counter(item) ".";
font-variant-numeric: lining-nums;
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 2em;
transform: translateX(-126%);
text-align: right;
}
}
}
p,
li {
a {
@include link_focus();
}
}
// WordPress/TinyMCE specifics
.wp-caption-text,
figcaption {
@extend %text-size-caption;
@extend %uol-font-sans-serif;
color: $color-font--x-light;
a {
@include link_focus();
font-style: italic;
color: inherit;
}
}
// JADU/CKEditor
blockquote {
footer {
p,
cite {
@extend %text-size-caption;
@extend %uol-font-sans-serif--italic;
color: $color-font--x-light;
}
}
}
}
.uol-rich-text--with-lead {
> p:first-of-type {
@extend .uol-typography-paragraph-intro;
font-weight: $font-weight-bold--sans-serif;
}
}
/* No context defined. */