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.
<div class="uol-rich-text">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph normal. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet pariatur voluptatum veniam ipsa reiciendis natus iure quibusdam placeat? Quos ex ad asperiores dicta suscipit eligendi id perferendis officiis totam magnam.</p>
<p>This sentence contains <strong>Bold text</strong>. Lorem ipsum dolor sit amet.</p>
<p>This sentence contains <em>Italic text</em>. Lorem ipsum dolor sit amet.</p>
<pre>Formatted</pre>
<address>1 High St, Leeds, LS2 9JT</address>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<blockquote>
<p>A block quote</p>
</blockquote>
<blockquote>
<p>A cited block quote</p>
<footer>
<p><cite>Ben B</cite></p>
</footer>
</blockquote>
<p>Paragraph with abbreviation. The aim of this project is to meet <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 AA standard</p>
{# Accordions #}
<div class="uol-accordion">
<h2 class="uol-accordion__title">
Faculty of Arts, Humanities and Cultures
</h2>
<div class="uol-accordion__content uol-rich-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Malesuada Etiam Egestas Condimentum Quam</li>
<li>Parturient Elit Sit Cursus Porta</li>
<li>Adipiscing Dapibus Quam Sit</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Elit Consectetur Vulputate</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uol-accordion">
<h2 class="uol-accordion__title">
Faculty of Biological Sciences
</h2>
<div class="uol-accordion__content uol-rich-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uol-accordion">
<h2 class="uol-accordion__title">
Faculty of Business
</h2>
<div class="uol-accordion__content uol-rich-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi consequatur facere autem optio ullam praesentium sint rerum consequuntur doloremque exercitationem ad, molestias quaerat eum ipsam dignissimos soluta reiciendis placeat esse.</p>
</div>
{# In text calls to action #}
<h3>Every Apple product advertisement has the time set to 9:41</h3>
<p>Every advertisement for an Apple Mac, MacBook, iPad or iPhone, has the time set as 9:41.</p>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet. Laboriosam minus quasi amet?</p>
</div>
<h3>Every Apple product advertisement has the time set to 9:41</h3>
<p>Every advertisement for an Apple Mac, MacBook, iPad or iPhone, has the time set as 9:41.</p>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<h3>Every Apple product advertisement has the time set to 9:41</h3>
<p>Every advertisement for an Apple Mac, MacBook, iPad or iPhone, has the time set as 9:41.</p>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<div class="uol-rich-text">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph normal. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet pariatur voluptatum veniam ipsa reiciendis natus iure quibusdam placeat? Quos ex ad asperiores dicta suscipit eligendi id perferendis officiis totam magnam.</p>
<p>This sentence contains <strong>Bold text</strong>. Lorem ipsum dolor sit amet.</p>
<p>This sentence contains <em>Italic text</em>. Lorem ipsum dolor sit amet.</p>
<pre>Formatted</pre>
<address>1 High St, Leeds, LS2 9JT</address>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<blockquote>
<p>A block quote</p>
</blockquote>
<blockquote>
<p>A cited block quote</p>
<footer>
<p><cite>Ben B</cite></p>
</footer>
</blockquote>
<p>Paragraph with abbreviation. The aim of this project is to meet <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 AA standard</p>
<div class="uol-accordion">
<h2 class="uol-accordion__title">
Faculty of Arts, Humanities and Cultures
</h2>
<div class="uol-accordion__content uol-rich-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Malesuada Etiam Egestas Condimentum Quam</li>
<li>Parturient Elit Sit Cursus Porta</li>
<li>Adipiscing Dapibus Quam Sit</li>
<li>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</li>
<li>Elit Consectetur Vulputate</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uol-accordion">
<h2 class="uol-accordion__title">
Faculty of Biological Sciences
</h2>
<div class="uol-accordion__content uol-rich-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="uol-accordion">
<h2 class="uol-accordion__title">
Faculty of Business
</h2>
<div class="uol-accordion__content uol-rich-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi consequatur facere autem optio ullam praesentium sint rerum consequuntur doloremque exercitationem ad, molestias quaerat eum ipsam dignissimos soluta reiciendis placeat esse.</p>
</div>
<h3>Every Apple product advertisement has the time set to 9:41</h3>
<p>Every advertisement for an Apple Mac, MacBook, iPad or iPhone, has the time set as 9:41.</p>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet. Laboriosam minus quasi amet?</p>
</div>
<h3>Every Apple product advertisement has the time set to 9:41</h3>
<p>Every advertisement for an Apple Mac, MacBook, iPad or iPhone, has the time set as 9:41.</p>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
</div>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
<h3>Every Apple product advertisement has the time set to 9:41</h3>
<p>Every advertisement for an Apple Mac, MacBook, iPad or iPhone, has the time set as 9:41.</p>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/">Coronavirus (covid19) update</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam minus quasi amet?</p>
</div>
.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. */