General image guidance is available on the image documentation page.
Article content allows images to be included within the content as per the following HTML example:
<img alt="International Space Station" src="/placeholders/ph-news-15.jpg">
Images can have any height appropriate to the image, but consideration must be given to different device sizes and orientations when selecting images. Landscape images are more effective on web pages.
The maximum display size for an article content image is 850px.
CMS systems which render images to specific sizes (e.g. utilising scripts which specify sizing parameters) should set the width to be 850px and the height to be such that aspect ratio is maintained.
{% if article.content %}
<div class="uol-rich-text {{ 'uol-rich-text--with-lead' if article.style_lead }}">
{{ article.content | safe }}
</div>
{% endif %}
<div class="uol-rich-text ">
<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
<h2>Ullamcorper quam dolor</h2>
<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p>undefined<p>Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.</p>
<p>Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p>
<blockquote>
<p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>
</blockquote>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p>
<hr />
<h3>Ridiculus risus ultricies</h3>
<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p>
<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>Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.</p>
<hr />
<ul>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Quibusdam sequi esse reprehenderit at quis!</li>
<li>Aliquid eaque nostrum ducimus magni placeat.</li>
<li>Tempora laboriosam dolores quibusdam fuga at!</li>
<li>Eligendi possimus explicabo quidem labore nobis.</li>
</ul>
<hr />
<ol>
<li>Lorem ipsum dolor sit amet consectetur.</li>
<li>Quibusdam sequi esse reprehenderit at quis!</li>
<li>Aliquid eaque nostrum ducimus magni placeat.</li>
<li>Tempora laboriosam dolores quibusdam fuga at!</li>
<li>Eligendi possimus explicabo quidem labore nobis.</li>
</ol>
<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia quas voluptatem sunt unde hic delectus in nemo voluptas quos!</li>
<li>Ipsum architecto sit ratione odio quasi non necessitatibus. Amet laudantium laborum blanditiis perferendis fuga molestias omnis esse cupiditate voluptatibus deserunt.</li>
<li>Qui harum, autem architecto deserunt impedit numquam eum quod aut voluptate veritatis nostrum dolor inventore! Amet enim quia impedit sapiente!</li>
<li>Consequuntur hic eligendi voluptate! Earum officiis id sint debitis. Voluptate quaerat rerum ipsum eum voluptatibus similique quisquam aut autem optio.</li>
<li>Quibusdam, placeat eaque. Commodi, autem! Consequuntur libero maiores a quis. Nam excepturi nemo vitae fugiat voluptas nostrum exercitationem earum dolorum.</li>
</ul>
<hr />
<ol>
<li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia quas voluptatem sunt unde hic delectus in nemo voluptas quos!</li>
<li>Ipsum architecto sit ratione odio quasi non necessitatibus. Amet laudantium laborum blanditiis perferendis fuga molestias omnis esse cupiditate voluptatibus deserunt.</li>
<li>Qui harum, autem architecto deserunt impedit numquam eum quod aut voluptate veritatis nostrum dolor inventore! Amet enim quia impedit sapiente!</li>
<li>Consequuntur hic eligendi voluptate! Earum officiis id sint debitis. Voluptate quaerat rerum ipsum eum voluptatibus similique quisquam aut autem optio.</li>
<li>Quibusdam, placeat eaque. Commodi, autem! Consequuntur libero maiores a quis. Nam excepturi nemo vitae fugiat voluptas nostrum exercitationem earum dolorum.</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>
<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>
<figure><img src='../../placeholders/banner/banner-01.jpg' alt='Actors touching each others faces'></figure>
<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p>
<figure><img src='../../placeholders/banner/banner-01.jpg' alt='Actors touching each others faces'>
<figcaption>Image caption. May be used for © notices</figcaption>
</figure>
</div>
{
"article": {
"content": "<p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p><h2>Ullamcorper quam dolor</h2><p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p>undefined<p>Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.</p><p>Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.</p><blockquote><p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p></blockquote><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p><hr/><h3>Ridiculus risus ultricies</h3><p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p><p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus mollis interdum.</p><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>Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue.</p><hr/><ul><li>Lorem ipsum dolor sit amet consectetur.</li><li>Quibusdam sequi esse reprehenderit at quis!</li><li>Aliquid eaque nostrum ducimus magni placeat.</li><li>Tempora laboriosam dolores quibusdam fuga at!</li><li>Eligendi possimus explicabo quidem labore nobis.</li></ul><hr/><ol><li>Lorem ipsum dolor sit amet consectetur.</li><li>Quibusdam sequi esse reprehenderit at quis!</li><li>Aliquid eaque nostrum ducimus magni placeat.</li><li>Tempora laboriosam dolores quibusdam fuga at!</li><li>Eligendi possimus explicabo quidem labore nobis.</li></ol><p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p><ul><li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia quas voluptatem sunt unde hic delectus in nemo voluptas quos!</li><li>Ipsum architecto sit ratione odio quasi non necessitatibus. Amet laudantium laborum blanditiis perferendis fuga molestias omnis esse cupiditate voluptatibus deserunt.</li><li>Qui harum, autem architecto deserunt impedit numquam eum quod aut voluptate veritatis nostrum dolor inventore! Amet enim quia impedit sapiente!</li><li>Consequuntur hic eligendi voluptate! Earum officiis id sint debitis. Voluptate quaerat rerum ipsum eum voluptatibus similique quisquam aut autem optio.</li><li>Quibusdam, placeat eaque. Commodi, autem! Consequuntur libero maiores a quis. Nam excepturi nemo vitae fugiat voluptas nostrum exercitationem earum dolorum.</li></ul><hr/><ol><li>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia quas voluptatem sunt unde hic delectus in nemo voluptas quos!</li><li>Ipsum architecto sit ratione odio quasi non necessitatibus. Amet laudantium laborum blanditiis perferendis fuga molestias omnis esse cupiditate voluptatibus deserunt.</li><li>Qui harum, autem architecto deserunt impedit numquam eum quod aut voluptate veritatis nostrum dolor inventore! Amet enim quia impedit sapiente!</li><li>Consequuntur hic eligendi voluptate! Earum officiis id sint debitis. Voluptate quaerat rerum ipsum eum voluptatibus similique quisquam aut autem optio.</li><li>Quibusdam, placeat eaque. Commodi, autem! Consequuntur libero maiores a quis. Nam excepturi nemo vitae fugiat voluptas nostrum exercitationem earum dolorum.</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><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><figure><img src='../../placeholders/banner/banner-01.jpg' alt='Actors touching each others faces'></figure><p>Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.</p><figure><img src='../../placeholders/banner/banner-01.jpg' alt='Actors touching each others faces'><figcaption>Image caption. May be used for © notices</figcaption></figure>"
}
}