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.

{# <h2> #}
<h2>Heading 2</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>

{# &lt;h3&gt; #}
<h3>Heading 3</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum alias illo reprehenderit iste quod rem eveniet veritatis, nobis praesentium soluta quaerat adipisci nam, consequuntur iusto mollitia! Necessitatibus perspiciatis animi aliquam?</p>
<p>Vel in itaque veniam reprehenderit, libero eaque voluptate dignissimos explicabo deserunt, quos repellendus assumenda beatae iure? Voluptatum assumenda unde, id consequuntur enim nulla ea eveniet inventore, obcaecati dolorum aperiam? Illum?</p>
<p>Labore veniam dolorem dicta odit repellendus officiis beatae quae? Modi veniam, distinctio ex beatae vitae, dicta exercitationem odit accusantium esse nobis perspiciatis ullam itaque est reprehenderit ducimus magnam rerum! Reprehenderit?</p>

{# &lt;h4&gt; #}
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor a esse culpa quod facere, libero nihil officiis, cum voluptatum mollitia numquam. Sequi doloribus aut, ut veniam quaerat accusantium vel laboriosam?</p>
<p>Officiis dolorem molestiae, exercitationem, officia nostrum explicabo aut doloremque totam architecto fugit rem deserunt. Repudiandae similique nobis quibusdam veritatis. Dolor dicta cumque illum fugiat, tenetur officiis unde odio ipsam nihil.</p>
<p>Fugiat doloribus tenetur reiciendis adipisci quibusdam blanditiis accusamus explicabo soluta tempora veniam commodi repellendus odio qui aspernatur numquam dolorum perspiciatis, repellat consequatur quia eum molestias dicta. Ducimus voluptate cupiditate odio?</p>

{# &lt;h5&gt; #}
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur veritatis similique error a commodi tempora sit tenetur ducimus quas, dolore adipisci quisquam, harum labore magnam eveniet dolorem laboriosam numquam debitis.</p>
<p>Et perspiciatis doloribus vel qui tempora beatae illum optio assumenda fugiat nostrum veritatis, esse voluptates temporibus, rem hic ad possimus ipsum accusamus! Neque fuga ipsum dolorem itaque aut totam nisi!</p>
<p>Corrupti provident nulla odio voluptatibus a, enim consequuntur autem in voluptas tempore? Rem impedit recusandae fugit, culpa harum atque accusantium laudantium, natus ex reprehenderit eligendi! Enim nostrum tempore accusamus iusto.</p>

{# &lt;h6&gt; #}
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam velit expedita ab illum! Reiciendis molestiae aperiam deserunt vero voluptates iusto! Commodi accusamus fugiat quas cum maiores neque aut minus nesciunt!</p>
<p>Praesentium rerum consectetur rem nobis, et quas odit tenetur eum sapiente quod temporibus, ab placeat laboriosam facilis consequatur voluptates accusamus asperiores quisquam, voluptatibus quis sit fugit sunt. Odio, alias beatae!</p>
<p>Quidem, ad! Sed modi laboriosam delectus, sequi labore omnis praesentium ad eos sint aliquid libero deleniti repellendus nobis incidunt nesciunt, alias, adipisci maxime. Mollitia iste commodi placeat in soluta aperiam?</p>

{# &lt;p&gt; #}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia temporibus sed ipsam nostrum fuga possimus debitis, corrupti deserunt perferendis est sint, quibusdam veritatis quisquam explicabo vel consequuntur saepe. Velit, architecto?</p>
<p>Fugiat officiis praesentium assumenda expedita ratione ipsa sint quae quaerat debitis vero. Alias voluptates in aliquam quidem natus. Dolorem adipisci tenetur nobis ratione dolor odit molestiae, harum fuga distinctio quam?</p>
<p>Eum, velit exercitationem iure odio maiores debitis enim vitae, ipsam, non eveniet consectetur quam eaque reiciendis optio tenetur labore quasi! Ex temporibus, praesentium enim illo provident iste repudiandae modi nobis?</p>

{# Unordered list #}
<h6>Here are some of the things that design systems help us with:</h6>
<ul>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
</ul>

<h6>Here are some of the things that design systems help us with:</h6>
<ul>
  <li><strong>Efficiency and speed:</strong> Design systems allow us to work faster and more efficiently. They streamline the design and development process — decreasing the amount of time it takes to design, build, and ship new websites, products, and features.</li>
  <li><strong>Consistency and user experience:</strong> Spend less time needlessly creating the same things over-and-over — slightly differently every time — and more time focussing on user research, problem-solving, and building great products.</li>
  <li><strong>Creating a stronger brand:</strong> Design systems help weave brand identity throughout a product in a consistent and maintainable way. I’m a big believer that brand plays a crucial role in design systems. This is why I recommend thinking and designing holistically — considering the brand and product as a whole, as opposed to tackling problems one-by-one and hoping the pieces will fit.</li>
</ul>

{# Ordered list #}
<p>Here are some of the things that design systems help us with:</p>
<ol>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
</ol>

{# Nested lists #}

<h6>Nested lists</h6>
<ol>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience
    <ul>
      <li>Efficiency and speed</li>
      <li>Consistency and user experience</li>
      <li>Creating a stronger brand</li>
    </ul>
  </li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed
    <ul>
      <li>Efficiency and speed</li>
      <li>Consistency and user experience</li>
      <li>Creating a stronger brand</li>
    </ul>
  </li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
</ol>

<ul>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience
    <ol>
      <li>Efficiency and speed</li>
      <li>Consistency and user experience</li>
      <li>Creating a stronger brand</li>
    </ol>
  </li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed
    <ul>
      <li>Efficiency and speed</li>
      <li>Consistency and user experience</li>
      <li>Creating a stronger brand</li>
    </ul>
  </li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
  <li>Efficiency and speed</li>
  <li>Consistency and user experience</li>
  <li>Creating a stronger brand</li>
</ul>

{# Blockquote #}
<blockquote>
    <p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>
</blockquote>

{# Blockquote with Cite #}
<blockquote cite="https://designsystemfoundations.com/">
    <p>A design system will go nowhere without developers. A beautifully designed library of design components is useless if it lives only in design software and documentation. It has to be built, deployed, maintained, and scaled. Developers are your new best friends</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui maiores officiis vel omnis nostrum quod perspiciatis provident dolore eos exercitationem obcaecati nobis laboriosam, reiciendis facere in itaque quidem, assumenda nihil!</p>
    <footer>
      <cite>
        Andrew Couldwell, Laying the Foundations
      </cite>
    </footer>
</blockquote>

{# Horizontal rile #}
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque labore provident, fugit doloremque eum velit alias, voluptate, nihil id repellat laudantium. Voluptatum deserunt quam unde illum asperiores ad deleniti vel!</p>
<hr>
<p>Vitae nesciunt asperiores impedit qui, adipisci quisquam alias eius cumque possimus nam ducimus saepe, est voluptates tempore. Eligendi sit cum quos mollitia voluptatum sunt quod numquam, incidunt veritatis? Dolor, laudantium!</p>

{# Images #}
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt amet cupiditate ducimus ab illum blanditiis assumenda ipsam exercitationem repudiandae asperiores neque perspiciatis aperiam, eius excepturi nulla itaque facilis eos sint.</p>
<img src="{{ '/placeholders/banner/banner-01.jpg' | path }}" alt="Actors touching each others faces">
<p>Nesciunt, molestias eius? Ex ducimus mollitia, eaque reprehenderit harum quae itaque quis magnam voluptatibus, saepe quibusdam soluta est nobis iste vero aliquid quidem nesciunt aut similique quaerat? Accusamus, ipsam aliquam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt amet cupiditate ducimus ab illum blanditiis assumenda ipsam exercitationem repudiandae asperiores neque perspiciatis aperiam, eius excepturi nulla itaque facilis eos sint.</p>
<figure>
  <img src="{{ '/placeholders/banner/banner-01.jpg' | path }}" alt="Actors touching each others faces">
</figure>
<p>Nesciunt, molestias eius? Ex ducimus mollitia, eaque reprehenderit harum quae itaque quis magnam voluptatibus, saepe quibusdam soluta est nobis iste vero aliquid quidem nesciunt aut similique quaerat? Accusamus, ipsam aliquam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt amet cupiditate ducimus ab illum blanditiis assumenda ipsam exercitationem repudiandae asperiores neque perspiciatis aperiam, eius excepturi nulla itaque facilis eos sint.</p>
<figure>
  <img src="{{ '/placeholders/banner/banner-01.jpg' | path }}" alt="Actors touching each others faces">
  <figcaption>
    Image caption. May be used for &copy; notices
  </figcaption>
</figure>
<p>Nesciunt, molestias eius? Ex ducimus mollitia, eaque reprehenderit harum quae itaque quis magnam voluptatibus, saepe quibusdam soluta est nobis iste vero aliquid quidem nesciunt aut similique quaerat? Accusamus, ipsam aliquam!</p>

{# Video embeds from YouTubeE #}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga obcaecati molestias, explicabo in illum repellat rerum dicta, cupiditate dolorum natus reiciendis corporis voluptas quam ab autem minus nostrum, expedita doloribus.</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/NcWibP5JA_E" title="YouTube video player - students staying safe at the University of Leeds" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p>Explicabo aliquid deserunt est debitis, iure ut, dolorem quis nesciunt aliquam neque quod quidem numquam perferendis odit cum in fuga veritatis cumque molestias magni accusamus voluptate a nemo. Alias, quidem?</p>

{#
Old style numerals
Old-style numerals to be used in all running text
#}
<p>0123456789</p>

<p>In August 2018, Apple became the first public U.S. company to be valued at over $1 trillion. The company employs 123,000 full-time employees and maintains 504 in 24 countries as of 2018.</p>
{#
Lining numerals
Lining numerals to be used in headings, tables and dates
#}
<h2>0123456789</h2>
<h2>In August 2018, Apple became the first public U.S. company to be valued at over $1 trillion</h2>

<p>This paragraph <a href="#">contains a link</a></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. Maxime iure accusantium iste aliquid officiis corrupti fugiat asperiores ipsa commodi eos vel alias, voluptates distinctio, veniam soluta provident! Voluptate, enim labore?</p>

{# Table #}

<table>
  <thead>
    <tr>
      <th>Name</th>

      <th>Description</th>

      <th>Country of origin</th>

      <th>Fat percentage</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Cheddar</td>

      <td> Cheddar cheese is a relatively
      hard, off-white, sometimes sharp-tasting, natural cheese.
      Originating in the English village of Cheddar in Somerset,
      cheeses of this style are now produced beyond the region
      and in several countries around the world</td>

      <td>UK</td>

      <td>16%</td>
    </tr>

    <tr>
      <td>Brie</td>

      <td> Brie is a soft cow's-milk cheese
      named after Brie, the French region from which it
      originated. It is pale in color with a slight grayish tinge
      under a rind of white mould. The rind is typically eaten,
      with its flavor depending largely upon the ingredients used
      and its manufacturing environment</td>

      <td>France</td>

      <td>28%</td>
    </tr>

    <tr>
      <td>Edam</td>

      <td> Edam is a semi-hard cheese that
      originated in the Netherlands, and is named after the town
      of Edam in the province of North Holland. Edam is
      traditionally sold in rounded cylinders with a pale yellow
      interior and a coat, or rind, of red paraffin wax. Edam
      ages and travels well, and does not spoil; it only
      hardens</td>

      <td>Netherlands</td>

      <td>11%</td>
    </tr>

    <tr>
      <td>Manchego</td>

      <td> Manchego is a cheese made in the
      La Mancha region of Spain from the milk of sheep of the
      Manchega breed. It is aged between 60 days and 2 years.
      Manchego has a firm and compact consistency and a buttery
      texture, and often contains small, unevenly distributed air
      pockets</td>

      <td>Spain</td>

      <td>25%</td>
    </tr>

    <tr>
      <td>Parmigiano-Reggiano</td>

      <td> Parmigiano-Reggiano or Parmesan
      is an Italian hard, granular cheese that is produced from
      cow's milk and has aged 12-36 months.</td>

      <td>Italy</td>

      <td>29.7%</td>
    </tr>

    <tr>
      <td>Cashel Blue</td>

      <td> Cashel Blue is a hand-made,
      semi-soft, blue veined, medium-strength blue cheese with a
      creamy texture. Cashel Blue was the first Irish blue
      cheese, named after the Rock of Cashel overlooking the
      pastures close to the cheese farm of the family Grubb.</td>

      <td>Ireland</td>

      <td>45%</td>
    </tr>

    <tr>
      <td>Stilton</td>

      <td> Stilton is an English cheese,
      produced in two varieties: Blue, which has had Penicillium
      roqueforti added to generate a characteristic smell and
      taste, and White, which has not.</td>

      <td>Uk</td>

      <td>35%</td>
    </tr>

    <tr>
      <td>Shropshire Blue</td>

      <td> Shropshire Blue is a cow's milk
      cheese made in the United Kingdon</td>

      <td>Uk</td>

      <td>48%</td>
    </tr>

    <tr>
      <td>Wensleydale</td>

      <td> Wensleydale is a style of cheese
      originally produced in Wensleydale, North Yorkshire,
      England, but now mostly made in large commercial creameries
      throughout the UK. The term "Yorkshire Wensleydale" can
      only be used for cheese that is made in Wensleydale</td>

      <td>Uk</td>

      <td>32%</td>
    </tr>

    <tr>
      <td>Cornish Yarg</td>

      <td> Semi-hard cow's milk cheese made
      in Cornwall from the milk of Friesian cows. Before being
      left to mature, this cheese is wrapped in nettle leaves to
      form an edible, though mouldy, rind.</td>

      <td>Uk</td>

      <td>30%</td>
    </tr>

    <tr>
      <td>Stinking Bishop</td>

      <td> Award-winning, washed-rind cheese
      produced since 1994 by Charles Martell and Son at Hunts
      Court Farm, Dymock, Gloucestershire, in the south west of
      England.</td>

      <td>Uk</td>

      <td>48%</td>
    </tr>
  </tbody>
</table>

{# 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>
  <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>

<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>
<h2>Heading 2</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>

<h3>Heading 3</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum alias illo reprehenderit iste quod rem eveniet veritatis, nobis praesentium soluta quaerat adipisci nam, consequuntur iusto mollitia! Necessitatibus perspiciatis animi aliquam?</p>
<p>Vel in itaque veniam reprehenderit, libero eaque voluptate dignissimos explicabo deserunt, quos repellendus assumenda beatae iure? Voluptatum assumenda unde, id consequuntur enim nulla ea eveniet inventore, obcaecati dolorum aperiam? Illum?</p>
<p>Labore veniam dolorem dicta odit repellendus officiis beatae quae? Modi veniam, distinctio ex beatae vitae, dicta exercitationem odit accusantium esse nobis perspiciatis ullam itaque est reprehenderit ducimus magnam rerum! Reprehenderit?</p>

<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor a esse culpa quod facere, libero nihil officiis, cum voluptatum mollitia numquam. Sequi doloribus aut, ut veniam quaerat accusantium vel laboriosam?</p>
<p>Officiis dolorem molestiae, exercitationem, officia nostrum explicabo aut doloremque totam architecto fugit rem deserunt. Repudiandae similique nobis quibusdam veritatis. Dolor dicta cumque illum fugiat, tenetur officiis unde odio ipsam nihil.</p>
<p>Fugiat doloribus tenetur reiciendis adipisci quibusdam blanditiis accusamus explicabo soluta tempora veniam commodi repellendus odio qui aspernatur numquam dolorum perspiciatis, repellat consequatur quia eum molestias dicta. Ducimus voluptate cupiditate odio?</p>

<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur veritatis similique error a commodi tempora sit tenetur ducimus quas, dolore adipisci quisquam, harum labore magnam eveniet dolorem laboriosam numquam debitis.</p>
<p>Et perspiciatis doloribus vel qui tempora beatae illum optio assumenda fugiat nostrum veritatis, esse voluptates temporibus, rem hic ad possimus ipsum accusamus! Neque fuga ipsum dolorem itaque aut totam nisi!</p>
<p>Corrupti provident nulla odio voluptatibus a, enim consequuntur autem in voluptas tempore? Rem impedit recusandae fugit, culpa harum atque accusantium laudantium, natus ex reprehenderit eligendi! Enim nostrum tempore accusamus iusto.</p>

<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Totam velit expedita ab illum! Reiciendis molestiae aperiam deserunt vero voluptates iusto! Commodi accusamus fugiat quas cum maiores neque aut minus nesciunt!</p>
<p>Praesentium rerum consectetur rem nobis, et quas odit tenetur eum sapiente quod temporibus, ab placeat laboriosam facilis consequatur voluptates accusamus asperiores quisquam, voluptatibus quis sit fugit sunt. Odio, alias beatae!</p>
<p>Quidem, ad! Sed modi laboriosam delectus, sequi labore omnis praesentium ad eos sint aliquid libero deleniti repellendus nobis incidunt nesciunt, alias, adipisci maxime. Mollitia iste commodi placeat in soluta aperiam?</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia temporibus sed ipsam nostrum fuga possimus debitis, corrupti deserunt perferendis est sint, quibusdam veritatis quisquam explicabo vel consequuntur saepe. Velit, architecto?</p>
<p>Fugiat officiis praesentium assumenda expedita ratione ipsa sint quae quaerat debitis vero. Alias voluptates in aliquam quidem natus. Dolorem adipisci tenetur nobis ratione dolor odit molestiae, harum fuga distinctio quam?</p>
<p>Eum, velit exercitationem iure odio maiores debitis enim vitae, ipsam, non eveniet consectetur quam eaque reiciendis optio tenetur labore quasi! Ex temporibus, praesentium enim illo provident iste repudiandae modi nobis?</p>

<h6>Here are some of the things that design systems help us with:</h6>
<ul>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
</ul>

<h6>Here are some of the things that design systems help us with:</h6>
<ul>
    <li><strong>Efficiency and speed:</strong> Design systems allow us to work faster and more efficiently. They streamline the design and development process — decreasing the amount of time it takes to design, build, and ship new websites, products, and features.</li>
    <li><strong>Consistency and user experience:</strong> Spend less time needlessly creating the same things over-and-over — slightly differently every time — and more time focussing on user research, problem-solving, and building great products.</li>
    <li><strong>Creating a stronger brand:</strong> Design systems help weave brand identity throughout a product in a consistent and maintainable way. I’m a big believer that brand plays a crucial role in design systems. This is why I recommend thinking and designing holistically — considering the brand and product as a whole, as opposed to tackling problems one-by-one and hoping the pieces will fit.</li>
</ul>

<p>Here are some of the things that design systems help us with:</p>
<ol>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
</ol>

<h6>Nested lists</h6>
<ol>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience
        <ul>
            <li>Efficiency and speed</li>
            <li>Consistency and user experience</li>
            <li>Creating a stronger brand</li>
        </ul>
    </li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed
        <ul>
            <li>Efficiency and speed</li>
            <li>Consistency and user experience</li>
            <li>Creating a stronger brand</li>
        </ul>
    </li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
</ol>

<ul>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience
        <ol>
            <li>Efficiency and speed</li>
            <li>Consistency and user experience</li>
            <li>Creating a stronger brand</li>
        </ol>
    </li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed
        <ul>
            <li>Efficiency and speed</li>
            <li>Consistency and user experience</li>
            <li>Creating a stronger brand</li>
        </ul>
    </li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
    <li>Efficiency and speed</li>
    <li>Consistency and user experience</li>
    <li>Creating a stronger brand</li>
</ul>

<blockquote>
    <p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>
</blockquote>

<blockquote cite="https://designsystemfoundations.com/">
    <p>A design system will go nowhere without developers. A beautifully designed library of design components is useless if it lives only in design software and documentation. It has to be built, deployed, maintained, and scaled. Developers are your new best friends</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui maiores officiis vel omnis nostrum quod perspiciatis provident dolore eos exercitationem obcaecati nobis laboriosam, reiciendis facere in itaque quidem, assumenda nihil!</p>
    <footer>
        <cite>
            Andrew Couldwell, Laying the Foundations
        </cite>
    </footer>
</blockquote>

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque labore provident, fugit doloremque eum velit alias, voluptate, nihil id repellat laudantium. Voluptatum deserunt quam unde illum asperiores ad deleniti vel!</p>
<hr>
<p>Vitae nesciunt asperiores impedit qui, adipisci quisquam alias eius cumque possimus nam ducimus saepe, est voluptates tempore. Eligendi sit cum quos mollitia voluptatum sunt quod numquam, incidunt veritatis? Dolor, laudantium!</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt amet cupiditate ducimus ab illum blanditiis assumenda ipsam exercitationem repudiandae asperiores neque perspiciatis aperiam, eius excepturi nulla itaque facilis eos sint.</p>
<img src="../../placeholders/banner/banner-01.jpg" alt="Actors touching each others faces">
<p>Nesciunt, molestias eius? Ex ducimus mollitia, eaque reprehenderit harum quae itaque quis magnam voluptatibus, saepe quibusdam soluta est nobis iste vero aliquid quidem nesciunt aut similique quaerat? Accusamus, ipsam aliquam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt amet cupiditate ducimus ab illum blanditiis assumenda ipsam exercitationem repudiandae asperiores neque perspiciatis aperiam, eius excepturi nulla itaque facilis eos sint.</p>
<figure>
    <img src="../../placeholders/banner/banner-01.jpg" alt="Actors touching each others faces">
</figure>
<p>Nesciunt, molestias eius? Ex ducimus mollitia, eaque reprehenderit harum quae itaque quis magnam voluptatibus, saepe quibusdam soluta est nobis iste vero aliquid quidem nesciunt aut similique quaerat? Accusamus, ipsam aliquam!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt amet cupiditate ducimus ab illum blanditiis assumenda ipsam exercitationem repudiandae asperiores neque perspiciatis aperiam, eius excepturi nulla itaque facilis eos sint.</p>
<figure>
    <img src="../../placeholders/banner/banner-01.jpg" alt="Actors touching each others faces">
    <figcaption>
        Image caption. May be used for &copy; notices
    </figcaption>
</figure>
<p>Nesciunt, molestias eius? Ex ducimus mollitia, eaque reprehenderit harum quae itaque quis magnam voluptatibus, saepe quibusdam soluta est nobis iste vero aliquid quidem nesciunt aut similique quaerat? Accusamus, ipsam aliquam!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga obcaecati molestias, explicabo in illum repellat rerum dicta, cupiditate dolorum natus reiciendis corporis voluptas quam ab autem minus nostrum, expedita doloribus.</p>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/NcWibP5JA_E" title="YouTube video player - students staying safe at the University of Leeds" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<p>Explicabo aliquid deserunt est debitis, iure ut, dolorem quis nesciunt aliquam neque quod quidem numquam perferendis odit cum in fuga veritatis cumque molestias magni accusamus voluptate a nemo. Alias, quidem?</p>

<p>0123456789</p>

<p>In August 2018, Apple became the first public U.S. company to be valued at over $1 trillion. The company employs 123,000 full-time employees and maintains 504 in 24 countries as of 2018.</p>

<h2>0123456789</h2>
<h2>In August 2018, Apple became the first public U.S. company to be valued at over $1 trillion</h2>

<p>This paragraph <a href="#">contains a link</a></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. Maxime iure accusantium iste aliquid officiis corrupti fugiat asperiores ipsa commodi eos vel alias, voluptates distinctio, veniam soluta provident! Voluptate, enim labore?</p>

<table>
    <thead>
        <tr>
            <th>Name</th>

            <th>Description</th>

            <th>Country of origin</th>

            <th>Fat percentage</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Cheddar</td>

            <td> Cheddar cheese is a relatively
                hard, off-white, sometimes sharp-tasting, natural cheese.
                Originating in the English village of Cheddar in Somerset,
                cheeses of this style are now produced beyond the region
                and in several countries around the world</td>

            <td>UK</td>

            <td>16%</td>
        </tr>

        <tr>
            <td>Brie</td>

            <td> Brie is a soft cow's-milk cheese
                named after Brie, the French region from which it
                originated. It is pale in color with a slight grayish tinge
                under a rind of white mould. The rind is typically eaten,
                with its flavor depending largely upon the ingredients used
                and its manufacturing environment</td>

            <td>France</td>

            <td>28%</td>
        </tr>

        <tr>
            <td>Edam</td>

            <td> Edam is a semi-hard cheese that
                originated in the Netherlands, and is named after the town
                of Edam in the province of North Holland. Edam is
                traditionally sold in rounded cylinders with a pale yellow
                interior and a coat, or rind, of red paraffin wax. Edam
                ages and travels well, and does not spoil; it only
                hardens</td>

            <td>Netherlands</td>

            <td>11%</td>
        </tr>

        <tr>
            <td>Manchego</td>

            <td> Manchego is a cheese made in the
                La Mancha region of Spain from the milk of sheep of the
                Manchega breed. It is aged between 60 days and 2 years.
                Manchego has a firm and compact consistency and a buttery
                texture, and often contains small, unevenly distributed air
                pockets</td>

            <td>Spain</td>

            <td>25%</td>
        </tr>

        <tr>
            <td>Parmigiano-Reggiano</td>

            <td> Parmigiano-Reggiano or Parmesan
                is an Italian hard, granular cheese that is produced from
                cow's milk and has aged 12-36 months.</td>

            <td>Italy</td>

            <td>29.7%</td>
        </tr>

        <tr>
            <td>Cashel Blue</td>

            <td> Cashel Blue is a hand-made,
                semi-soft, blue veined, medium-strength blue cheese with a
                creamy texture. Cashel Blue was the first Irish blue
                cheese, named after the Rock of Cashel overlooking the
                pastures close to the cheese farm of the family Grubb.</td>

            <td>Ireland</td>

            <td>45%</td>
        </tr>

        <tr>
            <td>Stilton</td>

            <td> Stilton is an English cheese,
                produced in two varieties: Blue, which has had Penicillium
                roqueforti added to generate a characteristic smell and
                taste, and White, which has not.</td>

            <td>Uk</td>

            <td>35%</td>
        </tr>

        <tr>
            <td>Shropshire Blue</td>

            <td> Shropshire Blue is a cow's milk
                cheese made in the United Kingdon</td>

            <td>Uk</td>

            <td>48%</td>
        </tr>

        <tr>
            <td>Wensleydale</td>

            <td> Wensleydale is a style of cheese
                originally produced in Wensleydale, North Yorkshire,
                England, but now mostly made in large commercial creameries
                throughout the UK. The term "Yorkshire Wensleydale" can
                only be used for cheese that is made in Wensleydale</td>

            <td>Uk</td>

            <td>32%</td>
        </tr>

        <tr>
            <td>Cornish Yarg</td>

            <td> Semi-hard cow's milk cheese made
                in Cornwall from the milk of Friesian cows. Before being
                left to mature, this cheese is wrapped in nettle leaves to
                form an edible, though mouldy, rind.</td>

            <td>Uk</td>

            <td>30%</td>
        </tr>

        <tr>
            <td>Stinking Bishop</td>

            <td> Award-winning, washed-rind cheese
                produced since 1994 by Charles Martell and Son at Hunts
                Court Farm, Dymock, Gloucestershire, in the south west of
                England.</td>

            <td>Uk</td>

            <td>48%</td>
        </tr>
    </tbody>
</table>

<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>
    <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>

<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>
  • 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. */