Rich Text areas

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.

<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolore rerum quae odio dicta, magnam rem ratione eius fugit. Similique deleniti quos, asperiores natus molestias consequuntur! Cum eaque molestiae dolores?</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>

<ul>
  <li>Unordered List item 1</li>
  <li>Unordered List item 2</li>
  <li>Unordered List item 3</li>
  <li>Unordered List item 4</li>
</ul>
<ol>
  <li>Ordered List item 1</li>
  <li>Ordered List item 2</li>
  <li>Ordered List item 3</li>
  <li>Ordered List item 4</li>
</ol>

<blockquote>
  <p>Blockquote. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque deserunt ea illum nesciunt laboriosam incidunt esse iste quod earum quis!</p>
</blockquote>

<p>This sentence contains <a href="https://leeds.ac.uk">a link</a>. Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>

<p>This is <del>strikethrough</del> text.</p>

<hr />

<pre>
  Preformatted text
  preserves line
  breaks
</pre>

<div id="attachment_1738" style="width: 530px" class="wp-caption alignleft">
  <a href="http://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo.jpg">
    <img aria-describedby="caption-attachment-1738" loading="lazy" class="wp-image-1738 size-full" title="Linked In Logo (Title)" src="https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo.jpg" alt="Linkedin Learning logo showing some content comes from Lynda.com" width="520" height="315" srcset="https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo.jpg 520w, https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo-250x151.jpg 250w, https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo-120x73.jpg 120w, https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo-400x242.jpg 400w" sizes="(max-width: 520px) 100vw, 520px" />
  </a>
  <p id="caption-attachment-1738" class="wp-caption-text">LinkedIn Logo</p>
</div>

  {# 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. Magni, voluptate assumenda nemo consectetur sint reiciendis commodi amet quibusdam tempora consequatur officia neque facere dicta itaque quas qui tempore? Recusandae, esse.</p>
<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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolore rerum quae odio dicta, magnam rem ratione eius fugit. Similique deleniti quos, asperiores natus molestias consequuntur! Cum eaque molestiae dolores?</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>

<ul>
    <li>Unordered List item 1</li>
    <li>Unordered List item 2</li>
    <li>Unordered List item 3</li>
    <li>Unordered List item 4</li>
</ul>
<ol>
    <li>Ordered List item 1</li>
    <li>Ordered List item 2</li>
    <li>Ordered List item 3</li>
    <li>Ordered List item 4</li>
</ol>

<blockquote>
    <p>Blockquote. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque deserunt ea illum nesciunt laboriosam incidunt esse iste quod earum quis!</p>
</blockquote>

<p>This sentence contains <a href="https://leeds.ac.uk">a link</a>. Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>

<p>This is <del>strikethrough</del> text.</p>

<hr />

<pre>
  Preformatted text
  preserves line
  breaks
</pre>

<div id="attachment_1738" style="width: 530px" class="wp-caption alignleft">
    <a href="http://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo.jpg">
        <img aria-describedby="caption-attachment-1738" loading="lazy" class="wp-image-1738 size-full" title="Linked In Logo (Title)" src="https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo.jpg" alt="Linkedin Learning logo showing some content comes from Lynda.com" width="520" height="315" srcset="https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo.jpg 520w, https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo-250x151.jpg 250w, https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo-120x73.jpg 120w, https://leeds3.wpengine.com/odpl/wp-content/uploads/sites/15/2019/11/LinkedIn_Learning_Logo-400x242.jpg 400w" sizes="(max-width: 520px) 100vw, 520px" />
    </a>
    <p id="caption-attachment-1738" class="wp-caption-text">LinkedIn Logo</p>
</div>

<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. Magni, voluptate assumenda nemo consectetur sint reiciendis commodi amet quibusdam tempora consequatur officia neque facere dicta itaque quas qui tempore? Recusandae, esse.</p>
  • Content:
    .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;
        }
      }
    
  • URL: /components/raw/uol-typography-rich-text/_typography-rich-text.scss
  • Filesystem Path: src/library/01-foundations/01-typography/04-typography-rich-text/_typography-rich-text.scss
  • Size: 5.5 KB
/* No context defined. */