A general article template to support a variety of uses including:
The visual layouts for each are article type are selected using the article_type option.
| Name | Type | Description |
|---|---|---|
| article_type | string | Optional Used to control layout variations. Supports: ‘news’, ‘event’, ‘profile’, ‘person-insight’ |
See the context tab of each variant for examples of the data needed to populate each article type.
The following sections detail what goes in to each specific article pattern.
At least one paragraph.
(See page heading component and context tab for config structure)
Must have at least one paragraph.
Other information as per the default options above
The news supplement allows content authors to tag related news stories to the original news article.
Highlight to the user additional news stories relevant to the subject matter. This saves them from having to search for related information and showcases the depth of knowledge of the subject matter within the University.
There is no limit to the number of cards, although we recommend a maximum of 3 cards within this pattern.
Cards can be passed through the configuration:
'widgets': [
{
'type': 'news-events',
'title': 'Related news',
'lead': '<p>This News and Events widget contains 8 cards. However, at certain screen sizes it will only display the first 6</p>',
'link': {
'url': '/news',
'text': 'View all news',
},
'cards': {
'image_layout': true,
'items': [
{
'image': {
'src': '/placeholders/banner/banner-01.jpg',
'alt': 'A super informative description'
},
'url': '#',
'title': 'Leeds signs up to tackle waste in fashion',
'date': '2021-05-07'
},
...
]
}
},
](See page heading component and context tab for config structure)
Further event information eg:
Must have at least one paragraph.
Other information as per the default options above
The events supplement allows content authors to promote additional upcoming events.
Highlight to the user additional upcoming events relevant to the subject matter. This saves them from having to search and showcases events within the University
Events are in chronological order from left to right, with the latest event shown first. There is no limit to the number of additional events that can be shown, although we recommend a maximum of 3 events within this pattern.
Events can be passed through the configuration:
'widgets': [
{
'type': 'events',
'title': 'Related events',
'link': {
'url': '/all-events-link',
'text': 'View all events',
},
'events': [
{
"title": "Creating climate-resilient agri-food systems in sub-Saharan Africa",
"link": "/some-event-link-6",
"start": "2022-07-25 11:00",
"end": "2022-08-25 16:30"
},
...
]
},
]The article highlight component appears on the left hand side of the blog pattern (above related content) for desktop views. When the view is reduced <1024 px, it is then required to appear at the end of the article main content and above any related content items.
In order to achieve this a specific class is added to the uol-article-highlight component containing class. This class is called ‘uol-content-switch-from-side-to-main’.
Javascript is utilised to move this element to the correct position dependent upon screen size.
Any other elements which are to be added and repositioned above need to have the same class added to their top level container.
The person insight variant of the article pattern follows a similar structure to other particle patterns, although mark up is slightly different - specifically the @uol-info-list is placed within the header (other patterns include this with the article content) in order to align content with designs.
@uol-profile-image - compulsory image with square dimensions at least 300px. Must be headshot of person. Note this image is cropped to a circle when choosing your square image.
@uol-info-list
For this pattern the info list component can contain any number of items (eg. course, year of graduation, nationality) but advised to be no more than four items.
@uol-page-heading - required. Including person name and person job title
@uol-profile-image - optional image with square dimensions at least 350px. Must be headshot of person. Note this image is cropped to a circle when choosing your square image.
@uol-info-list - facts about the person. Examples: areas of expertise, email address, location and websites.
@uol-article-section - sections relating to the user. This pattern differs from other article patterns, in that the main body of text is split up into different sections (section headings displayed alongside sections in this pattern). Each section has one title (H2). Other content can appear within these sections as per default content, note that inner content headings must start at H3 level.
Headings H3 - 6
Paragraph
Images - single and multiple
Videos - single and multiple
Snippett
Lists (ordered and unordered)
Links
Accordions (used to display publications)
CTA (Calls to action button) - editable to be dispalyed anywhere within the content block.
Tables Blockquote Intro paragraph (lead sentence) Side navigation Related news suppliment Related events suppliment Pullquotes Multi page document (previous/next) Marketing profile supplement
{% extends '@uol-template-article' %}
{% block page_content %}
{% render '@uol-article', {
page_heading: page_heading,
form: form,
rich_text_content: rich_text_content,
rich_text_lead: rich_text_lead,
iframe: iframe,
article_highlight: article_highlight,
profile_image: profile_image,
image_featured: image_featured,
article_type: article_type,
info_list: info_list,
article: article,
sections: sections,
supplements: supplements,
accordions: accordions,
widgets: widgets
} %}
{% render '@uol-section-nav-ctas', { ctas: section_ctas } %}
{% render '@uol-section-nav-related-content', { related_content: section_related } %}
{% endblock %}
<div class="uol-header">
<header class="uol-global-masthead-outer uol-global-masthead-outer--with-local-navigation">
<div class="uol-global-masthead uol-content-container">
<div class="uol-global-masthead__inner">
<a class="uol-skip-link" href="#main">Skip to main content</a>
<a class="uol-global-masthead__home" href="https://leeds.ac.uk">
<svg class="uol-logo-uol-inline" width="286px" height="40px" viewBox="0 0 286 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false" aria-hidden="true">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g class="uol-logo-uol-inline__img" transform="translate(-32.000000, -12.000000)" fill="#000000">
<g transform="translate(32.000000, 12.000000)">
<path d="M29.5,13.85 L30.04,13.85 L30.04,13.38 L29.12,13.38 L29.12,14.85 L29.42,14.85 L29.5,13.85 Z M27.89,13.85 L28.43,13.85 L28.43,13.38 L27.62,13.38 L27.62,14.85 L28,14.85 L28,13.85 L27.89,13.85 Z M0,0 L0,40 L20.77,40 L20.77,28 L24.29,28 L24.29,40 L24.75,40 L24.75,26.85 L31.19,26.85 L31.19,40 L31.62,40 L31.62,28 L35.22,28 L35.22,40 L39.97,40 L39.97,0 L0,0 Z M28,6.81 L31.49,9 L24.49,9 L28,6.81 Z M24.44,9.36 L31.62,9.36 L31.95,12 L24.06,12 L24.44,9.36 Z M34.44,27.54 L31.72,27.54 L31.72,26.38 L24.37,26.38 L24.37,27.54 L21.62,27.54 L21.62,25.07 L22.08,25.07 L22.08,16.71 L22.84,16.71 L22.84,12.38 L33.18,12.38 L33.18,16.71 L33.95,16.71 L33.95,25 L34.41,25 L34.44,27.54 Z M29.69,25.07 L30.3,25.07 L30.3,19.57 L31.62,19.57 L31.62,18.57 L29.73,18.57 L29.69,25.07 Z M23.69,17.64 L32.2,17.64 L32.62,17.1 L23.37,17.1 L23.69,17.64 Z M26.99,25.07 L27.62,25.07 L27.62,19.57 L28.92,19.57 L28.92,18.57 L26.97,18.57 L26.99,25.07 Z M26.22,13.85 L26.76,13.85 L26.76,13.38 L25.92,13.38 L25.92,14.85 L26.22,14.85 L26.22,13.85 Z M24.37,25.07 L24.98,25.07 L24.98,19.57 L26.28,19.57 L26.28,18.57 L24.37,18.57 L24.37,25.07 Z M28.05,28.55 C27.2950895,28.5378224 26.6077131,28.9831944 26.3103442,29.6771757 C26.0129753,30.3711569 26.1646185,31.1760463 26.6941324,31.7142407 C27.2236463,32.2524352 28.0259637,32.4171451 28.7246881,32.131099 C29.4234126,31.8450529 29.8799018,31.1650087 29.88,30.41 C29.874812,29.3965391 29.0632426,28.5716653 28.05,28.55 L28.05,28.55 Z M28.05,31.8 C27.4802734,31.8121976 26.9600047,31.4778532 26.73441,30.954552 C26.5088152,30.4312508 26.6229172,29.8234297 27.0229366,29.4175706 C27.422956,29.0117115 28.0290597,28.888813 28.5555753,29.1068004 C29.0820908,29.3247877 29.4239399,29.8401565 29.42,30.41 L29.42,30.41 C29.4226618,30.7760016 29.279816,31.1280692 29.0228891,31.3887468 C28.7659622,31.6494245 28.4160018,31.7973574 28.05,31.8 Z" fill-rule="nonzero"></path>
<path d="M67.74,21.56 L67.74,12.11 L64.52,12.11 L64.52,21.78 C64.5729285,22.6519371 64.2821511,23.5099099 63.71,24.17 C62.2015798,25.4907365 59.9484202,25.4907365 58.44,24.17 C57.8375091,23.4681634 57.5230989,22.5642339 57.56,21.64 L57.56,12.11 L54.36,12.11 L54.36,21.9 C54.2611083,23.4971923 54.8130316,25.066386 55.89,26.25 C57.3080282,27.4384118 59.1354122,28.0236055 60.98,27.88 C62.8798784,28.0022464 64.7494205,27.3574525 66.17,26.09 C67.2665719,24.8598816 67.8310989,23.2454064 67.74,21.6 L67.74,21.56 Z" fill-rule="nonzero"></path>
<path d="M86.32,27.75 L86.32,12.25 L83.12,12.25 L83.12,20.16 C83.12,20.82 83.12,21.79 83.12,22.61 L83.12,22.61 C82.6700679,21.9172776 82.1826769,21.2496187 81.66,20.61 L75.13,12.28 L71.86,12.28 L71.86,27.78 L75.08,27.78 L75.08,19.26 C75.08,18.56 75.08,17.63 75.02,17.1 L75.08,17.1 C75.53,17.78 75.97,18.38 76.56,19.1 L83.3,27.71 L86.32,27.75 Z"></path>
<polygon fill-rule="nonzero" points="93.91 27.75 93.91 12.24 90.67 12.24 90.67 27.75 93.91 27.75"></polygon>
<path d="M111.16,12.19 L107.89,12.19 L104.39,20.53 C103.973063,21.4323296 103.615632,22.3609812 103.32,23.31 L103.32,23.31 C103,22.44 102.65,21.45 102.25,20.44 L99.08,12.19 L95.54,12.19 L101.91,27.81 L104.31,27.81 L111.16,12.19 Z" fill-rule="nonzero"></path>
<polygon fill-rule="nonzero" points="121.99 27.75 121.99 25.11 116.24 25.11 116.24 21.15 121.18 21.15 121.18 18.5 116.24 18.5 116.24 14.88 121.16 14.88 122.02 12.24 113.02 12.24 113.02 27.75 121.99 27.75"></polygon>
<path d="M137.49,27.75 C135.14,23.8 133.65,21.22 132.86,20.75 L132.86,20.75 C134.52497,20.1129167 135.639353,18.532231 135.68,16.75 C135.68,14.36 134.19,12.27 130.05,12.27 L125.52,12.27 L125.52,27.75 L128.78,27.75 L128.78,21.75 L129.92,21.75 C130.49,21.97 131.43,23.75 133.78,27.75 L137.49,27.75 Z M132.49,17.03 C132.512387,18.2982154 131.50799,19.3472518 130.24,19.38 L128.75,19.38 L128.75,14.92 L130.11,14.92 C130.7095,14.8426398 131.31339,15.0261093 131.768537,15.4238853 C132.223685,15.8216613 132.486376,16.39554 132.49,17 L132.49,17.03 Z"></path>
<path d="M148.78,23.39 C148.78,18.49 142.11,18.76 142.11,16.04 C142.11,15.15 143,14.63 144.11,14.63 C145.425193,14.6783583 146.704585,15.071487 147.82,15.77 L147.82,12.98 C146.617964,12.3388574 145.27211,12.0153018 143.91,12.04 C140.49,12.04 138.63,14.1 138.63,16.47 C138.606448,17.4826835 138.96324,18.4674294 139.63,19.23 C141.53,21.37 145.29,21.72 145.29,23.78 C145.29,24.95 144.03,25.37 142.84,25.37 C141.564416,25.3277619 140.3296,24.9103591 139.29,24.17 L138.04,26.5 C139.513506,27.5085649 141.264687,28.0328708 143.05,28 C146.24,28 148.76,26.24 148.76,23.4 L148.78,23.39 Z" fill-rule="nonzero"></path>
<polygon fill-rule="nonzero" points="154.63 27.75 154.63 12.24 151.4 12.24 151.4 27.75 154.63 27.75"></polygon>
<polygon fill-rule="nonzero" points="169.59 12.24 156.9 12.24 156.9 14.88 161.44 14.88 161.44 27.75 164.7 27.75 164.7 14.88 168.86 14.88 169.59 12.24"></polygon>
<path d="M183.77,12.25 L180.4,12.25 L178.03,16.62 C177.68,17.27 177.21,18.11 176.91,18.81 L176.91,18.81 C176.59,18.11 176.1,17.23 175.77,16.58 L173.36,12.25 L169.81,12.25 L175.18,21.62 L175.18,27.75 L178.38,27.75 L178.38,21.66 L183.77,12.25 Z" fill-rule="nonzero"></path>
<path d="M206.12,20 C206.245834,18.0205657 205.578218,16.0725084 204.264697,14.5863532 C202.951177,13.1001981 201.099898,12.198307 199.12,12.08 L199.12,12.08 C198.786933,12.0611526 198.453067,12.0611526 198.12,12.08 C195.961198,12.0257615 193.874951,12.8609834 192.35,14.39 C190.865298,15.950778 190.059803,18.0364334 190.11,20.19 C190.031444,22.4287273 190.92044,24.5929231 192.55,26.13 C195.937737,28.8012328 200.76331,28.6190558 203.94,25.7 C205.369447,24.1531499 206.131218,22.1049922 206.06,20 L206.12,20 Z M202.7,20.07 C202.7,23.47 200.7,25.41 198.1,25.41 C195.5,25.41 193.46,23.47 193.46,20.07 C193.46,16.67 195.38,14.72 198.07,14.72 C200.76,14.72 202.67,16.72 202.67,20.07 L202.7,20.07 Z"></path>
<polygon fill-rule="nonzero" points="218.11 12.24 209.08 12.24 209.08 27.75 212.32 27.75 212.32 21.2 217.23 21.2 217.22 18.56 212.32 18.56 212.32 14.88 217.28 14.88 218.11 12.24"></polygon>
<polygon fill-rule="nonzero" points="234.6 27.73 234.6 25.07 229.16 25.07 229.16 12.27 225.95 12.27 225.95 27.73 234.6 27.73"></polygon>
<polygon fill-rule="nonzero" points="245.68 27.73 245.68 25.09 239.94 25.09 239.94 21.15 244.86 21.15 244.86 18.5 239.94 18.5 239.94 14.89 244.84 14.89 245.7 12.27 236.71 12.27 236.71 27.73 245.68 27.73"></polygon>
<polygon fill-rule="nonzero" points="257.43 27.73 257.43 25.09 251.69 25.09 251.69 21.15 256.62 21.15 256.62 18.5 251.69 18.5 251.69 14.89 256.59 14.89 257.43 12.27 248.46 12.27 248.46 27.73 257.43 27.73"></polygon>
<path d="M273.98,19.86 C273.98,15.24 270.88,12.27 265.36,12.27 L260.21,12.27 L260.21,27.73 L265.1,27.73 C270.47,27.73 274.01,24.63 274.01,19.87 L273.98,19.86 Z M270.53,19.95 C270.53,22.66 269.03,25.07 265.2,25.07 L263.43,25.07 L263.43,14.93 L265.14,14.93 C268.69,14.93 270.53,16.91 270.53,20 L270.53,19.95 Z"></path>
<path d="M285.62,23.37 C285.62,18.47 278.96,18.73 278.96,16.06 C278.96,15.16 279.85,14.64 281.01,14.64 C282.312256,14.700739 283.578073,15.0894273 284.69,15.77 L284.69,13 C283.499562,12.3319884 282.154998,11.9872284 280.79,12 C277.38,12 275.52,14.07 275.52,16.41 C275.503151,17.4215754 275.859097,18.4039867 276.52,19.17 C278.4,21.31 282.16,21.62 282.16,23.71 C282.16,24.88 280.88,25.34 279.76,25.34 C278.496079,25.2834172 277.277636,24.8517403 276.26,24.1 L275.01,26.42 C276.470725,27.3959037 278.193447,27.9050483 279.95,27.88 C283.15,27.94 285.62,26.18 285.62,23.37 Z" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
<span class="hide-accessible">University of Leeds homepage</span>
</a>
</div>
<nav class="uol-quicklinks" aria-label="University links">
<ul class="uol-quicklinks__list">
<li class="uol-quicklinks__group">
Students
<ul class="uol-quicklinks__group__list">
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/mobile-app">Mobile App</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/minerva">Minerva</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/for-students">For Students</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="https://library.leeds.ac.uk">Library</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/it">IT</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
</li>
</ul>
</li>
<li class="uol-quicklinks__group">
Staff
<ul class="uol-quicklinks__group__list">
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/for-staff">For Staff</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/services-a-z">Services A-Z</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/staff-a-z">Staff A-Z</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/faculty-a-z">Faculties A-Z</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/student-education-service">Student Education Service</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/hr">HR</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/staff/it">IT</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
</li>
</ul>
</li>
<li class="uol-quicklinks__group">
Faculties
<ul class="uol-quicklinks__group__list">
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/arts-humanities-cultures">Faculty of Arts, Humanities and Cultures</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/biological-sciences">Faculty of Biological Sciences</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/business">Faculty of Business</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/engineering-physical-sciences">Faculty of Engineering and Physical Sciences</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/environment">Faculty of Environment</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/medicine-health">Faculty of Medicine and Health</a>
</li>
<li class="uol-quicklinks__group__item">
<a class="uol-quicklinks__group__link" href="/faculty/social-sciences">Faculty of Social Sciences</a>
</li>
</ul>
</li>
</ul>
</nav>
<form id="uol-global-masthead__search-form" class="uol-global-masthead__search-form" action="/example-form-action">
<label class="uol-global-masthead__search-label" for="global-masthead__search-field">Search leeds.ac.uk</label>
<input class="uol-global-masthead__search-input" id="global-masthead__search-field" name="search-query" type="search" placeholder="Search leeds.ac.uk">
<button class="uol-global-masthead__search-submit" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
<path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
</svg>
<span class="hide-accessible">Search all leeds.ac.uk</span>
</button>
</form>
</div>
</header>
<nav class="uol-header-local-navigation-wrapper uol-content-container" aria-label="Site navigation">
<ul class="uol-header-local-navigation">
<li class="uol-header-local-navigation__item " data-label="Home">
<a class="uol-header-local-navigation__link" href="/" aria-current="page">
Home
</a>
</li>
<li class="uol-header-local-navigation__item uol-header-local-navigation__item--parent" data-label="Study">
Study
<ul class="uol-header-local-navigation__sub-nav" data-title="Study">
<li class="uol-header-local-navigation__item ">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/undergraduate">
Undergraduate
</a>
</li>
<li class="uol-header-local-navigation__item ">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/masters">
Masters courses
</a>
</li>
<li class="uol-header-local-navigation__item ">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/research">
Research degrees
</a>
</li>
<li class="uol-header-local-navigation__item ">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/international-students">
International students
</a>
</li>
<li class="uol-header-local-navigation__item ">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/online-courses">
Online courses
</a>
</li>
<li class="uol-header-local-navigation__item uol-header-local-navigation__item--cta">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/courses-search">
Search courses
</a>
</li>
<li class="uol-header-local-navigation__item uol-header-local-navigation__item--cta">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/coronavirus-faqs">
Coronavirus FAQs
</a>
</li>
<li class="uol-header-local-navigation__item uol-header-local-navigation__item--cta">
<a class="uol-header-local-navigation__link uol-header-local-navigation__link--sub-nav" href="/study/ug-virtual-open-days">
Undergraduate virtual open days
</a>
</li>
</ul>
</li>
<li class="uol-header-local-navigation__item " data-label="Research and innovation">
<a class="uol-header-local-navigation__link" href="/research-innovation">
Research and innovation
</a>
</li>
<li class="uol-header-local-navigation__item " data-label="Working with business">
<a class="uol-header-local-navigation__link" href="/working-with-business">
Working with business
</a>
</li>
<li class="uol-header-local-navigation__item " data-label="Global">
<a class="uol-header-local-navigation__link" href="/global">
Global
</a>
</li>
<li class="uol-header-local-navigation__item " data-label="Around campus">
<a class="uol-header-local-navigation__link" href="/ariund-campus">
Around campus
</a>
</li>
<li class="uol-header-local-navigation__item " data-label="About">
<a class="uol-header-local-navigation__link" href="/about">
About
</a>
</li>
</ul>
</nav>
</div>
<nav class="uol-section-nav" aria-label="Section navigation">
<h2 class="uol-section-nav__title">
<span class="uol-section-nav__title__intro">In this section</span>
<span class="uol-section-nav__title__text">Undergraduate</span>
</h2>
<ul class="uol-section-nav__list">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/overview">
<span class="uol-section-nav__item__label">Overview</span>
</a>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Academic experience</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/learning_and_teaching">
<span class="uol-section-nav__item__label">Learning and teaching</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/academic_facilities">
<span class="uol-section-nav__item__label">Academic facilities</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Enrichment opportunities</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/study_abroad">
<span class="uol-section-nav__item__label">Study abroad</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/work_experience">
<span class="uol-section-nav__item__label">Work experience</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/clubs_and_societies">
<span class="uol-section-nav__item__label">Clubs and societies</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/student_enterprise">
<span class="uol-section-nav__item__label">Student enterprise</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Your future</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/careers">
<span class="uol-section-nav__item__label">Careers</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/leeds_for_life">
<span class="uol-section-nav__item__label">Leeds for Life</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Campus life</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">City life</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/city_life/overview">
<span class="uol-section-nav__item__label">Overview</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/wellbeing_and_support">
<span class="uol-section-nav__item__label">Wellbeing and support</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/sport_and_fitness">
<span class="uol-section-nav__item__label">Sport and fitness</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/a_global_university">
<span class="uol-section-nav__item__label">A global university</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Fees and costs</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/undergraduate_fees">
<span class="uol-section-nav__item__label">Undergraduate fees</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/additional_costs">
<span class="uol-section-nav__item__label">Additional costs</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/living_expenses">
<span class="uol-section-nav__item__label">Living expenses</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tuition_fee_liability">
<span class="uol-section-nav__item__label">Tuition fee liability</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tuition_fee_payment_schedule">
<span class="uol-section-nav__item__label">Tuition fee payment schedule</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/how_to_pay">
<span class="uol-section-nav__item__label">How to pay</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/sponsored_students">
<span class="uol-section-nav__item__label">Sponsored students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/paying_for_your_accommodation">
<span class="uol-section-nav__item__label">Paying for your accommodation</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Funding</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/funding">
<span class="uol-section-nav__item__label">Overview</span>
</a>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">University scholarships and funding</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h5 class="uol-section-nav__item__label">Leeds financial support</h5>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/leeds_financial_support_eligibility">
<span class="uol-section-nav__item__label">Leeds financial support eligibility</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/how_much_is_it_worth">
<span class="uol-section-nav__item__label">How much is it worth?</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/choosing_your_support">
<span class="uol-section-nav__item__label">Choosing your support</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h5 class="uol-section-nav__item__label">Scholarships | personal circumstances</h5>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/scholarships_personal_circumstances/scholarships">
<span class="uol-section-nav__item__label">Scholarships</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/scholarships_personal_circumstances/scholarships_faqs">
<span class="uol-section-nav__item__label">Scholarships FAQs</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/scholarships_academic_achievement">
<span class="uol-section-nav__item__label">Scholarships | academic achievement</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">Student loans and bursaries</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/what_help_is_available">
<span class="uol-section-nav__item__label">What help is available?</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/eligibility_and_applications">
<span class="uol-section-nav__item__label">Eligibility and applications</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tuition_fee_loans_for_new_part-time_students">
<span class="uol-section-nav__item__label">Tuition fee loans for new part-time students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/nhs_funding">
<span class="uol-section-nav__item__label">NHS funding</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/financial_support_for_muslim_students">
<span class="uol-section-nav__item__label">Financial support for Muslim students</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/international_funding">
<span class="uol-section-nav__item__label">International funding</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/government_part-time_maintenance_loans">
<span class="uol-section-nav__item__label">Government part-time maintenance loans</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/extra_financial_help">
<span class="uol-section-nav__item__label">Extra financial help</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/funds_available_after_you_arrive">
<span class="uol-section-nav__item__label">Funds available after you arrive</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Applying</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/how_to_apply">
<span class="uol-section-nav__item__label">How to apply</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/accepted_qualifications">
<span class="uol-section-nav__item__label">Accepted qualifications</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/application_timetable">
<span class="uol-section-nav__item__label">Application timetable</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/writing_your_personal_statement">
<span class="uol-section-nav__item__label">Writing your personal statement</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/alternative_admissions">
<span class="uol-section-nav__item__label">Alternative admissions</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/care_leavers_and_estranged_students">
<span class="uol-section-nav__item__label">Care leavers and estranged students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/applying_faqs">
<span class="uol-section-nav__item__label">Applying FAQs</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/transparency_data">
<span class="uol-section-nav__item__label">Transparency data</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/degree_outcomes_statement">
<span class="uol-section-nav__item__label">Degree outcomes statement</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/declaring_criminal_convictions">
<span class="uol-section-nav__item__label">Declaring criminal convictions</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Types of course</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/part-time_and_mature_students">
<span class="uol-section-nav__item__label">Part-time and mature students</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/joint_honours">
<span class="uol-section-nav__item__label">Joint honours</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/foundation_courses">
<span class="uol-section-nav__item__label">Foundation courses</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/intercalating_and_integrated_masters">
<span class="uol-section-nav__item__label">Intercalating and Integrated Masters</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Teachers and advisors</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/teachers_and_advisors">
<span class="uol-section-nav__item__label">Overview</span>
</a>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">Supporting students</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/he_talks_and_workshops">
<span class="uol-section-nav__item__label">HE talks and workshops</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/subject-specific_outreach">
<span class="uol-section-nav__item__label">Subject-specific outreach</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/online_courses_for_schools">
<span class="uol-section-nav__item__label">Online courses for schools</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/live_webinars_for_schools_and_colleges">
<span class="uol-section-nav__item__label">Live webinars for schools and colleges</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/research_and_study_skills">
<span class="uol-section-nav__item__label">Research and study skills</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/alternative_admissions">
<span class="uol-section-nav__item__label">Alternative admissions</span>
</a>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h4 class="uol-section-nav__item__label">Supporting teachers and advisors</h4>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/teachers_and_advisors_cpd_webinars">
<span class="uol-section-nav__item__label">Teachers and advisors CPD webinars</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/talks_in_schools">
<span class="uol-section-nav__item__label">Talks in schools</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/intouniversity">
<span class="uol-section-nav__item__label">IntoUniversity</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/students_into_schools">
<span class="uol-section-nav__item__label">Students into schools</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/epq_virtual_conference">
<span class="uol-section-nav__item__label">EPQ Virtual Conference</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="uol-section-nav__item uol-section-nav__item--parent">
<h3 class="uol-section-nav__item__label">Parents and carers</h3>
<ul class="uol-section-nav__sublist">
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/supporting_your_son_or_daughter">
<span class="uol-section-nav__item__label">Supporting your son or daughter</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/tips_for_parents">
<span class="uol-section-nav__item__label">Tips for parents</span>
</a>
</li>
<li class="uol-section-nav__item ">
<a class="uol-section-nav__link" href="/parents_faqs">
<span class="uol-section-nav__item__label">Parents FAQs</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="uol-content-container uol-main-container">
<nav aria-label="Breadcrumb" class="uol-breadcrumb">
<ol class="uol-breadcrumb__list">
<li class="uol-breadcrumb__item">
<a class="uol-breadcrumb__link" href="/secion">
Section title
</a>
</li>
<li class="uol-breadcrumb__item">
<a class="uol-breadcrumb__link" href="/section/section">
Maecenas faucibus mollis interdum
</a>
</li>
<li class="uol-breadcrumb__item">
<a class="uol-breadcrumb__link" href="/section/section/section">
Lorem ipsum dolor sit amet consectetur adipiscing elit
</a>
</li>
<li class="uol-breadcrumb__item">
<a class="uol-breadcrumb__link" href="/section/section/section/section">
Mattis Ultricies Adipiscing Vestibulum
</a>
</li>
</ol>
</nav>
<div class="uol-article-container uol-col-container">
<div class="uol-side-nav-container"></div>
<main id="main" tabindex="-1" class="uol-article ">
<div class="uol-article__head">
<div class="uol-article__no-profile-image">
<header class="page-heading">
<h1 class="page-heading__title">
<span class="page-heading__title__main">CK editor pattern</span>
</h1>
</header>
</div>
</div>
<div class="uol-article__content">
<figure class="uol-featured-image">
<img class="uol-featured-image__img" src="/placeholders/tiles/space.jpg" alt="Night sky filled with stars">
</figure>
<div class="uol-rich-text uol-rich-text--with-lead">
<p>A lead paragraph is an introductory paragraph and can be used at the top of a page to summarise the content. Like the page title (H1), it should only be used once per page if needed.</p>
<h2>Page introduction</h2>
<p>The purpose of this pattern is to show all content types that can be added to article pages. Please refer to other article patterns for advised content layout specific to those patterns. </p>
<h2>Blockquote</h2>
<p>A blockquote is a quotation with a citation, designed to be offset from the main text on a page and is used to support content by visually highlighting a particular message or point.</p>
<p>Blockquotes generally feature direct quotations which may not already be mentioned in the main body of text and are placed within the reader's flow to help brake up large amounts of text.</p>
<h3>Blockquote example</h3>
<blockquote>
<p>(Blockquote) A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>
<footer>
<cite>(Blockquote citation) Andrew Couldwell, Laying the Foundations</cite>
</footer>
</blockquote>
<h2>Highlight</h2>
<p>Highlights are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text.</p>
<p>They are placed within the reader's content flow and are used to direct user's attention to important pieces of information.</p>
<h3>Highlight example</h3>
<div class="text-highlight">
<p>Leeds is among the top 100 universities in the <a href="/">QS World University Rankings 2021</a></p>
</div>
<h2>Accordion</h2>
<p>The accordion component lets users show and hide sections of content on a page. Accordions hide content, so the titles need to be clear.</p>
<h3>When to use</h3>
<p>Use the Accordions component to make a page easier to scan when it contains information that only some users will need.</p>
<h3>When not to use</h3>
<p>Accordions hide content from users and not everyone will notice them or understand how they work. For this reason, do not use an accordion for content that is essential to all users. </p>
<p>Do not use the Accordions component for large amounts of content or for complex layouts. Consider if it's better to:</p>
<ul>
<li>simplify and reduce the amount of content</li>
<li>split the content across multiple pages</li>
<li>keep the content on a single page, separated by headings</li>
<li>use a list of links to let users navigate quickly to specific sections of content</li>
</ul>
<p>Accordion example:</p>
<h3>Why are design systems important?</h3>
<div class="uol-accordion">
<h3 class="uol-accordion__title">Five most recent selected publications</h3>
<div class="uol-accordion__content">
<div class="uol-rich-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p>
</div>
</div>
</div>
<div class="uol-accordion">
<h3 class="uol-accordion__title">Conference papers</h3>
<div class="uol-accordion__content">
<div class="uol-rich-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p>
</div>
</div>
</div>
<div class="uol-accordion">
<h3 class="uol-accordion__title">Journal article</h3>
<div class="uol-accordion__content">
<div class="uol-rich-text">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p>
</div>
</div>
</div>
<h2>Image pair</h2>
<p>The image pair component allows us to add images into an article. These images are not to act as links. Images have an optional caption. When only one image is available, this will span across the space for two.</p>
<p>The image pair component should be preceeded by a heading or paragraph content.</p>
<h3>Two images example (with captions)</h3>
<div class="uol-image-pair">
<figure class="uol-image-pair__column">
<img class="uol-image-pair__image" src="/placeholders/campus/medium/23300.jpeg" alt="Caption one">
<figcaption class="uol-image-pair__caption">Caption one</figcaption>
</figure>
<figure class="uol-image-pair__column">
<img class="uol-image-pair__image" src="/placeholders/campus/medium/23305.jpeg" alt="Caption two">
<figcaption class="uol-image-pair__caption">Caption two</figcaption>
</figure>
</div>
<h3>Two images example (no captions)</h3>
<div class="uol-image-pair">
<figure class="uol-image-pair__column">
<img class="uol-image-pair__image" src="/placeholders/campus/medium/23300.jpeg" alt="Caption one">
</figure>
<figure class="uol-image-pair__column">
<img class="uol-image-pair__image" src="/placeholders/campus/medium/23305.jpeg" alt="Caption two">
</figure>
</div>
<h3>One image example</h3>
<p>When only one image is provided this will be cropped to maintain a 2:1 aspect ratio (vertically centred). consideration of this should be taken when choosing the image</p>
<div class="uol-image-pair">
<figure class="uol-image-pair__column">
<img class="uol-image-pair__image uol-image-pair__image--single" src="/placeholders/campus/medium/23300.jpeg" alt="Caption one">
<figcaption class="uol-image-pair__caption">Caption one</figcaption>
</figure>
</div>
<p>Further paragraph content can follow an image pair component.</p>
<h2>Lists</h2>
<p>Ordered (Numbered) and unordered (bulleted) lists are a great way to break up content.</p>
<h3>When to use</h3>
<p>Ordered list: Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.</p>
<h3>Ordered list example</h3>
<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>
<p>Unordered list: Use unordered lists to display text in no specific order.</p>
<h3>Un-ordered list example</h3>
<ul>
<li>Unordered list item one</li>
<li>Unordered list item two</li>
<li>Unordered list item three</li>
</ul>
<p>List items help users by:</p>
<ul>
<li>aiding scanning</li>
<li>breaking up content into useful chunks</li>
<li>drawing their eyes to the most important information</li>
</ul>
<h3>When not to use</h3>
<p>If you need to communicate long lists of narrative text.</p>
<h2>Tables</h2>
<p>Tables are containers for displaying information. They allow users to quickly scan, sort, compare and take action on large amounts of data.</p>
<p>Large tables can be overwhelming for some people and can be confusing for users of assistive technology. Consider whether a table is really needed.</p>
<p>A table can often be replaced by a:</p>
<ul>
<li>list of bullet points with appropriate subheadings</li>
<li>downloadable csv spreadsheet for large amounts of data</li>
</ul>
<h3>When not to use</h3>
<p>Only use tables to present data and tables should never contain images in tables.</p>
<h3>When using tables</h3>
<p>Use a maximum of 4 columns. This is the amount that can be comfortably displayed on a smartphone.</p>
<p>Have more rows than columns wherever possible to make your table longer, rather than wider. This makes it easier for people to read and understand.</p>
<h3>Table example</h3>
<table>
<thead>
<tr>
<th>Name of planet</th>
<th>Average temperatre</th>
<th>Average distance from the sun </th>
</tr>
</thead>
<tbody>
<tr>
<td>Mercury</td>
<td>-183°C to 427°C</td>
<td>57,900,00 km</td>
</tr>
<tr>
<td>Venus</td>
<td>480°C</td>
<td>108,160,000 km </td>
</tr>
<tr>
<td>Earth</td>
<td>14°C</td>
<td>149,600,000 km</td>
</tr>
<tr>
<td>Mars</td>
<td>-63°C</td>
<td>227,936,640 km</td>
</tr>
</tbody>
</table>
<h2>Images</h2>
<p>Images are an important part of any web experience. They carry a huge amount of value and do more than add decoration.</p>
<p>They let us convey ideas much faster than text, help tell powerful stories and engage with our users in ways that few other forms of content can. Images should support each message clearly and help to deliver an engaging user experience.</p>
<h3>Image example</h3>
<figure>
<img alt="Polar bear with cubs on ice sheet" src="/placeholders/ph-news-14.jpg">
<figcaption>Picture credit: <a href=#>The person who has taken this photograph</a></figcaption>
</figure>
<h2>Video</h2>
<p>Videos convey ideas much faster than text, which helps us tell powerful stories and engage with our users. Some people find videos much easier to understand.</p>
<h3>When using videos</h3>
<p>To meet the accessibility regulations for public sector organisations, all new videos published or updated after 23 September 2020 must have this alternative content:</p>
<ul>
<li>an audio description</li>
<li>closed captions</li>
<li>a transcript</li>
</ul>
<h3>Video example</h3>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/AjvkAkHZAzc" title="YouTube video player - Studying abroad" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2>Calls to action (CTA)</h2>
<p>We allow users to perform certain actions through the use of our call to actions (CTAs). It should always be clear to the user what the CTA's action is through text.</p>
<h3>When using CTA's</h3>
<p>Try not to have multiple CTA's next to each other.</p>
<p>Don't overload the page with the same type of CTA or too many CTA's.</p>
<h2>CTA example</h2>
<div class="uol-in-text-cta">
<h2 class="uol-in-text-cta__heading">
<a class="uol-in-text-cta__link" href="/home">In text CTA widget title</a>
</h2>
<p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>
</div>
<h2>Logo group</h2>
<p>The Logo Group enables 1+ logos to be displayed in an article.</p>
<p>They are placed within the content and are used to showcase a logo/group of logos, such as accreditation logos.</p>
<h3>When using the Logo Group</h3>
<p>Upload a closely cropped logo</p>
<p>Add a caption</p>
<h3>Logo group example</h3>
<div class="uol-logo-group">
<div class="uol-logo-group-item">
<div class="uol-logo-group-item__container">
<img class="uol-logo-group-item__logo" src="/placeholders/ph-accreditation-04.svg" alt="Association of MBAs">
</div>
<a class="uol-logo-group-item__link" href="/link-1">Association of MBAs</a>
</div>
<div class="uol-logo-group-item">
<div class="uol-logo-group-item__container">
<img class="uol-logo-group-item__logo" src="/placeholders/ph-accreditation-05.svg" alt="EFMD">
</div>
<a class="uol-logo-group-item__link" href="/link-2">EFMD</a>
</div>
<div class="uol-logo-group-item">
<div class="uol-logo-group-item__container">
<img class="uol-logo-group-item__logo" src="/placeholders/ph-accreditation-06.svg" alt="AACSB">
</div>
<a class="uol-logo-group-item__link" href="/link-3">AACSB</a>
</div>
<div class="uol-logo-group-item">
<div class="uol-logo-group-item__container">
<img class="uol-logo-group-item__logo" src="/placeholders/ph-accreditation-07.svg" alt="University of Leeds">
</div>
<a class="uol-logo-group-item__link" href="/link-4">University of Leeds</a>
</div>
</div>
<h3>Two images example (no captions)</h3>
<div class="uol-image-pair">
<figure class="uol-image-pair__column">
<img class="uol-image-pair__image" src="/placeholders/campus/medium/23300.jpeg" alt="Caption one">
</figure>
<figure class="uol-image-pair__column">
<img class="uol-image-pair__image" src="/placeholders/campus/medium/23305.jpeg" alt="Caption two">
</figure>
</div>
<h2>In Text Icons</h2>
<p>In text icons introductory paragraph.</p>
<ul class="in-text-icons">
<li class="in-text-icon uol-icon uol-icon--mdiWifi">Fast Wi-Fi</li>
<li class="in-text-icon uol-icon uol-icon--mdiDumbbell">On-site gym</li>
<li class="in-text-icon uol-icon uol-icon--mdiSofaSingleOutline">Common room and study area testing out long text</li>
<li class="in-text-icon uol-icon uol-icon--mdiSoccer">University sport</li>
<li class="in-text-icon uol-icon uol-icon--mdiParking">Parking</li>
<li class="in-text-icon uol-icon uol-icon--mdiGrill">Outdoor social space</li>
</ul>
<h2>In Text facts</h2>
<p>The In Text Facts component highlights 1-2 key facts or figures in an article.</p>
<p>They are placed within the content and are used to direct the user's attention to a key fact, such as a ranking or award.</p>
<h3>When using In Text Facts</h3>
<p>Do not reformat the text style.</p>
<p>Add an short headline for the title e.g. 'Top 10' and display the rest of the information underneath in the subtitle.</p>
<div class="uol-in-text-facts">
<h3 class="uol-in-text-facts__title">Two items, one with link</h3>
<div class="uol-in-text-facts__container">
<a href="/facts-url" class="uol-in-text-fact__item uol-in-text-fact__link">
<h4 class="uol-in-text-fact__item__title">With link</h4>
<p class="uol-in-text-fact__item__description">In text facts item description</p>
</a>
<div class="uol-in-text-fact__item">
<h4 class="uol-in-text-fact__item__title">Without link</h4>
<p class="uol-in-text-fact__item__description">In text facts item description</p>
</div>
</div>
</div>
<h2>Heading before linked list</h2>
<ul class="uol-linked-list">
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-1">School of Typography</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-2">School of Web Design</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-3">School of Branding</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-4">School of Fine Art History of Art and Print Illustration</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-5">School of Media Queries</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-6">School of Media and Communications</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-7">School of New CSS Tricks</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-8">School of Console Commands</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-9">School of Front-end Development</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-10">Institute of Accessibility for Everyone</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-11">Institute of Content Design</a> </li>
</ul>
<h2>Heading after linked list</h2>
<p> Paragraph of text before the linked list. 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>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eligendi hic consectetur non soluta tempora expedita veritatis nam quia ab eos. Non praesentium tempore ad officia esse dolorum, nulla optio.</p>
<ul class="uol-linked-list">
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-1">School of Typography</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-2">School of Web Design</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-3">School of Branding</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-4">School of Fine Art History of Art and Print Illustration</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-5">School of Media Queries</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-6">School of Media and Communications</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-7">School of New CSS Tricks</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-8">School of Console Commands</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-9">School of Front-end Development</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-10">Institute of Accessibility for Everyone</a> </li>
<li class="uol-linked-list__item"> <a class="uol-linked-list__link" href="/item-11">Institute of Content Design</a> </li>
</ul>
</div>
</div>
</main>
</div>
<aside class="uol-section-nav-ctas" aria-label="Related links">
<h3 class="uol-section-nav-ctas__title">Discover Leeds</h3>
<div class="uol-section-nav-ctas__links">
<a class="uol-button uol-section-nav-ctas__link" href="/cta-link-1">Open days</a>
<a class="uol-button uol-section-nav-ctas__link" href="/cta-link-2">Visit us</a>
<a class="uol-button uol-section-nav-ctas__link" href="/cta-link-3">Virtual campus tour</a>
<a class="uol-button uol-section-nav-ctas__link" href="/cta-link-4">Covid-19 FAQs for applicants and offer holders</a>
</div>
</aside>
<aside class="uol-content-switch-from-side-to-main uol-section-nav-related-content " aria-label="Related content">
<h2 class="uol-section-nav-related-content__title">Related content</h2>
<div class="uol-section-nav-related-content__list">
<div class="uol-section-nav-related__item">
<h3 class="uol-section-nav-related-content__item__title">
<a class="uol-section-nav-related-content__item__title__link" href="/meet-our-students">Meet our students</a>
</h3>
<p class="uol-section-nav-related-content__item__text">Hear from some of our undergraduates about some of the exciting things they've done to make the most of their student experience Hear from some of our undergraduates about some of the exciting things</p>
</div>
<div class="uol-section-nav-related__item">
<h3 class="uol-section-nav-related-content__item__title">
<a class="uol-section-nav-related-content__item__title__link" href="/meet-our-staff">Meet our staff</a>
</h3>
<p class="uol-section-nav-related-content__item__text">We understand that applicants and offer holders may have concerns about the ongoing coronavirus (COVID-19) situation and your plans to study with us at Leeds.</p>
</div>
<div class="uol-section-nav-related__item">
<h3 class="uol-section-nav-related-content__item__title">
Admissions Enquiries
</h3>
<div class="uol-section-nav-related-content__item__contact-wrapper">
<a class="uol-section-nav-related-content__contact uol-section-nav-related-content__contact--phone" href="tel:+441133433212">
+44 (0)113 3433213
</a>
</div>
<div class="uol-section-nav-related-content__item__contact-wrapper">
<a class="uol-section-nav-related-content__contact uol-section-nav-related-content__contact--email" href="mailto:study@leeds.ac.uk">
Study@leeds.ac.uk
</a>
</div>
</div>
</div>
</aside>
</div>
<footer class="uol-site-footer-outer">
<div class="uol-site-footer uol-content-container">
<div class="uol-site-footer__nav-container">
<nav class="uol-site-footer__nav-outer" aria-labelledby="footer-nav-title">
<h2 class="uol-site-footer__title" id="footer-nav-title">Footer navigation</h2>
<div class="uol-site-footer__nav">
<nav class="nav-list-group" aria-label="Study and Courses">
<h3 class="nav-list-group__title">Study and Courses</h3>
<ul class="nav-list-group__list">
<li class="nav-list-group__item">
<a href="/footer-link-undergraduate" class="nav-list-group__link">Undergraduate</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-link-masters-courses" class="nav-list-group__link">Masters courses</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-link-very-long-title" class="nav-list-group__link">Research degrees with very long titles that wrap over two lines like this one its very very long</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-international" class="nav-list-group__link">International</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-course-search" class="nav-list-group__link">Course search</a>
</li>
</ul>
</nav>
</div>
<div class="uol-site-footer__nav">
<nav class="nav-list-group" aria-label="About us">
<h3 class="nav-list-group__title">About us</h3>
<ul class="nav-list-group__list">
<li class="nav-list-group__item">
<a href="/footer-campus-map" class="nav-list-group__link">Campus map</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-heritage" class="nav-list-group__link">Our heritage</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-faculties" class="nav-list-group__link">Faculties</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-governance" class="nav-list-group__link">Governance</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-values" class="nav-list-group__link">Values and responsibility</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-equality" class="nav-list-group__link">Equality</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-executive" class="nav-list-group__link">Executive team</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-news" class="nav-list-group__link">News</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-events" class="nav-list-group__link">Events</a>
</li>
</ul>
</nav>
</div>
<div class="uol-site-footer__nav">
<nav class="nav-list-group" aria-label="Quicklinks and contacts">
<h3 class="nav-list-group__title">Quicklinks and contacts</h3>
<ul class="nav-list-group__list">
<li class="nav-list-group__item">
<a href="/footer-jobs" class="nav-list-group__link">Jobs</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-term-dates" class="nav-list-group__link">Term dates</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-services-a-z" class="nav-list-group__link">Services A-Z</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-library" class="nav-list-group__link">Library</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-alumni" class="nav-list-group__link">Alumni</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-press" class="nav-list-group__link">Press</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-video-leeds" class="nav-list-group__link">VideoLeeds</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-staff-a-z" class="nav-list-group__link">Staff A-Z</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-contacts" class="nav-list-group__link">Contacts</a>
</li>
<li class="nav-list-group__item">
<a href="/footer-coronavirus" class="nav-list-group__link">Coronavirus</a>
</li>
</ul>
</nav>
</div>
</nav>
</div>
<div class="uol-site-footer__address-container ">
<h2 class="uol-footer-contact__title">Contact information</h2>
<address class="uol-footer-contact" vocab="https://schema.org/" typeof="Organization">
<strong class="uol-footer-contact__name" property="name">University of Leeds</strong>
<div class="uol-footer-contact__address" property="address" typeof="PostalAddress">
<div property="streetAddress">
<span class="uol-footer-contact__address__item">Woodhouse Lane</span>
</div>
<span class="uol-footer-contact__address__item" property="addressLocality">Leeds</span>
<span class="uol-footer-contact__address__item" property="addressRegion">West Yorkshire</span>
<span class="uol-footer-contact__address__item" property="postalCode">LS2 9JT</span>
<span class="uol-footer-contact__address__item" property="addressCountry">United Kingdom</span>
</div>
<dl class="uol-footer-contact__telephone-email-container">
<dt class="uol-footer-contact__telephone-email-label">Telephone</dt>
<dd class="uol-footer-contact__telephone-email-data">
<a class="uol-footer-contact__telephone" href="tel:+4401132431751" property="telephone">+44 0113 243 1751</a>
</dd>
</dl>
</address>
<div class="uol-footer-social-media">
<a class="uol-footer-social-media__item" href="https://youtube.com/user/universityofleedsuk" aria-label="YouTube">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
<path fill="#000000" fill-rule="nonzero" d="M9.6 17.25V6.45l7.2 5.4m4.8-9.12c-.72-.24-5.16-.48-9.6-.48l-9.6.456C.528 3.33 0 7.53 0 11.85c0 4.308.528 8.52 2.4 9.132.72.24 5.16.468 9.6.468l9.6-.468c1.872-.612 2.4-4.824 2.4-9.132 0-4.32-.528-8.508-2.4-9.12z"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://twitter.com/UniversityLeeds" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
<path fill-rule="nonzero" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://instagram.com/universityofleeds/?hl=en" aria-label="Instagram">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
<path fill="#000000" fill-rule="nonzero" d="M6.96 0h10.08C20.88 0 24 3.12 24 6.96v10.08A6.96 6.96 0 0 1 17.04 24H6.96C3.12 24 0 20.88 0 17.04V6.96A6.96 6.96 0 0 1 6.96 0m-.24 2.4A4.32 4.32 0 0 0 2.4 6.72v10.56a4.32 4.32 0 0 0 4.32 4.32h10.56a4.32 4.32 0 0 0 4.32-4.32V6.72a4.32 4.32 0 0 0-4.32-4.32H6.72M18.3 4.2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 1 1 0-3M12 6a6 6 0 1 1 0 12 6 6 0 1 1 0-12m0 2.4a3.6 3.6 0 0 0 0 7.2 3.6 3.6 0 0 0 0-7.2z"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://www.linkedin.com/school/7244" aria-label="LinkedIn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
<path fill="#000000" fill-rule="nonzero" d="M24 24h-5.333v-9c0-1.413-1.587-2.587-3-2.587S13.333 13.587 13.333 15v9H8V8h5.333v2.667C14.213 9.24 16.48 8.32 18 8.32c3.333 0 6 2.72 6 6.013V24M5.333 24H0V8h5.333v16M2.667 0C4.14 0 5.333 1.194 5.333 2.667S4.14 5.333 2.667 5.333 0 4.14 0 2.667 1.194 0 2.667 0z"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://www.facebook.com/universityofleeds/" aria-label="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
<path fill="#000000" fill-rule="nonzero" d="M18 0h0v4.8h-2.4c-.828 0-1.2.972-1.2 1.8v3H18v4.8h-3.6V24H9.6v-9.6H6V9.6h3.6V4.8A4.8 4.8 0 0 1 14.4 0H18z"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://medium.com/university-of-leeds" aria-label="Medium">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
<path fill="#000000" fill-rule="evenodd" d="M24 1.5h-6.687l-4.757 13.348L7.15 1.5H.005v.663l2.517 3.43-.034 13.245L0 22.623l.005.627h7.027l.018-.577-2.944-3.836.078-10.72 6.207 15.132h.75l5.513-15.5v12.6l-2.26 2.383v.508H24v-.61l-2.202-2.328-.03-16.02L24 2.167V1.5z"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://www.weibo.com/leedsuniversityuk" aria-label="Weibo">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" focusable="false">
<path fill="#000000" fill-rule="nonzero" d="M10.9 20.894c-3.74.39-6.968-1.394-7.2-3.984s2.593-5.006 6.33-5.396 6.968 1.393 7.2 3.982-2.592 5.008-6.33 5.398m7.48-8.6c-.318-.1-.536-.17-.37-.6.36-.957.398-1.784.007-2.374-.733-1.105-2.74-1.046-5.04-.03 0-.001-.722.334-.537-.27.354-1.2.3-2.205-.25-2.786-1.247-1.318-4.566.05-7.41 3.05-2.13 2.25-3.368 4.633-3.368 6.694 0 3.942 4.79 6.338 9.477 6.338 6.143 0 10.23-3.766 10.23-6.756 0-1.807-1.442-2.832-2.738-3.256m4.08-7.213c-1.483-1.735-3.672-2.396-5.69-1.944h-.001c-.467.105-.765.59-.664 1.082s.56.807 1.026.702c1.437-.322 2.992.15 4.047 1.38s1.34 2.914.888 4.39v.001c-.147.48.102.994.557 1.15s.94-.107 1.09-.586c.633-2.08.233-4.44-1.25-6.175"></path>
<path d="M19.74 7.668c-.7-.766-1.738-1.057-2.693-.857a.71.71 0 0 0-.556.846c.084.383.468.63.858.546v.001a1.4 1.4 0 0 1 1.318.418c.343.374.435.886.288 1.333h.001a.71.71 0 0 0 .465.896c.38.12.788-.085.91-.46a2.75 2.75 0 0 0-.592-2.724m-8.817 8.113a.53.53 0 0 1-.628.228c-.217-.087-.284-.327-.162-.537s.397-.31.613-.227c.22.08.3.32.177.536m-1.158 1.463c-.35.552-1.104.794-1.67.54-.56-.25-.723-.892-.372-1.43S8.8 15.578 9.36 15.8c.57.24.752.876.406 1.433m1.32-3.905c-1.73-.443-3.684.405-4.434 1.904-.765 1.53-.026 3.226 1.72 3.782 1.8.574 3.942-.306 4.684-1.957.732-1.614-.18-3.275-1.97-3.73"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://www.tiktok.com/@universityofleeds" aria-label="TikTok">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3V0Z"></path>
</svg>
</a>
<a class="uol-footer-social-media__item" href="https://www.threads.net/@universityofleeds" aria-label="Threads">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 448 512">
<path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"></path>
</svg>
</a>
</div>
</div>
<div class="uol-site-footer__site-information-container">
<nav class="footer-site-information" aria-label="Site information">
<h2 class="hide-accessible">Site information</h2>
<ul class="footer-site-information__list">
<li class="footer-site-information__item">© 2024 University of Leeds</li>
<li class="footer-site-information__item"><a class="footer-site-information__link" href="/terms-and-conditions">Terms and conditions</a></li>
<li class="footer-site-information__item"><a class="footer-site-information__link" href="/accessibility">Accessibility</a></li>
<li class="footer-site-information__item"><a class="footer-site-information__link" href="/privacy">Privacy and cookies</a></li>
<li class="footer-site-information__item"><a class="footer-site-information__link" href="/freedom-of-information">Freedom of information</a></li>
</ul>
</nav>
</div>
<div class="uol-site-footer__logo-outer">
<a href="https://leeds.ac.uk" class="uol-site-footer__logo" aria-label="University of Leeds">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 80.79" fill="#000000" focusable="false" aria-hidden="true">
<path fill-rule="evenodd" d="M268.9 17.85h.7v-.65h-1.12v1.93h.43zm-2.05 0h.67v-.65h-1.12v1.93h.45zM230.44 0v51.7h27.1V36.15h4.62V51.7h.64v-17h8.42v17h.57V36.15h4.63V51.7h6.2V0zm36.53 8.75l4.63 2.8h-9.24zm-4.65 3.33h9.3l.5 3.4h-10.24zM275.4 35.6h-3.62v-1.47h-9.63v1.47h-3.6v-3.25h.65V21.62h1v-5.57h13.54v5.57h1v10.74h.62zm-6.17-3.25h.76v-7.12h1.7v-1.28h-2.5zm-7.8-9.6h11.12l.54-.7h-12.13zm4.3 9.6h.77v-7.12h1.7v-1.28h-2.48zm-.93-14.5h.68v-.65h-1.12v1.93h.44zm-2.57 14.5h.77v-7.12h1.68v-1.28h-2.5zM267 36.9a2.35 2.35 0 1 0 1.662.688A2.35 2.35 0 0 0 267 36.91zm0 4.18a1.84 1.84 0 1 1 1.83-1.83 1.82 1.82 0 0 1-1.83 1.83zM16.4 73.1V61.5h-3.94v11.86a4.08 4.08 0 0 1-1 2.93 4.19 4.19 0 0 1-3.31 1.2 4.14 4.14 0 0 1-3.18-1.2 4.45 4.45 0 0 1-1.08-3.11V61.5H-.04v12a7.24 7.24 0 0 0 1.87 5.33c1.37 1.33 3.44 2 6.24 2s4.94-.78 6.36-2.2a7.62 7.62 0 0 0 1.92-5.51z"></path>
<path d="M39.17 80.5v-19h-3.93v9.7l.06 2.95h-.06l-1.8-2.5-8-10.15h-4v19h3.94V70.1l-.07-2.64h.07l1.8 2.5 8.26 10.56z"></path>
<path d="M48.47 80.5v-19H44.5v19h3.97zm21.13-19h-4l-4.3 10.22-1.27 3.4H60l-1.3-3.52-3.87-10.1H50.5l7.8 19.15h2.94l8.4-19.15zm13.3 19v-3.24h-7.06V72.4h6.06v-3.26h-6.06v-4.43h6.04l1.04-3.23H71.88v19h11z"></path>
<path fill-rule="evenodd" d="M101.88 80.5c-2.86-4.85-4.7-8.06-5.67-8.6h0a5.4 5.4 0 0 0 3.46-4.91c0-2.94-1.83-5.45-6.9-5.45H87.2v19h4v-7.38h1.4c.7.27 1.84 2.4 4.73 7.35zm-6.13-13.15a2.83 2.83 0 0 1-2.91 2.89h-1.67v-5.47h1.67c1.87 0 2.9 1.12 2.9 2.58z"></path>
<path d="M115.72 75.15c0-6-8.18-5.67-8.18-9 0-1.1 1.1-1.73 2.5-1.73a9.33 9.33 0 0 1 4.54 1.39l.06-3.42a9.84 9.84 0 0 0-4.79-1.15c-4.2 0-6.47 2.53-6.47 5.43a5 5 0 0 0 1.2 3.38c2.33 2.63 6.94 3.06 6.94 5.58 0 1.44-1.54 1.95-2.95 1.95a7.9 7.9 0 0 1-4.36-1.47l-1.53 2.86a10.71 10.71 0 0 0 6.06 1.79c3.9 0 7-2.16 7-5.64zm7.16 5.35v-19h-3.95v19h3.95zm18.34-19h-15.56v3.23h5.57V80.5h4V64.73h5.1l.9-3.23zm17.38 0h-4.13l-2.9 5.36-1.37 2.68h-.05l-1.4-2.73-2.9-5.3h-4.36L148.1 73v7.53h3.95v-7.47l6.58-11.54z"></path>
<path d="M185.96 70.97a9.15 9.15 0 0 0-9.83-9.7 9.64 9.64 0 0 0-7.07 2.83 10 10 0 0 0-2.75 7.11 9.53 9.53 0 0 0 3 7.27 10.78 10.78 0 0 0 13.95-.52 9.78 9.78 0 0 0 2.66-7zm-4.2.1c0 4.17-2.4 6.55-5.64 6.55s-5.7-2.38-5.7-6.55 2.4-6.55 5.7-6.55 5.64 2.45 5.64 6.55z"></path>
<path fill-rule="evenodd" d="M200.68 61.5h-11.06v19h3.97v-8.03h6v-3.24h-6v-4.5h6.08l1-3.23zm20.22 19v-3.26h-6.68v-15.7h-3.92V80.5h10.6zm13.57 0v-3.23h-7.03v-4.84h6.04v-3.25h-6.04v-4.42h6l1.05-3.2h-11V80.5h10.98zm14.4 0v-3.23h-7.03v-4.84h6.05v-3.25h-6.05v-4.42h6.02l1.02-3.2h-11V80.5h10.98z"></path>
<path fill-rule="evenodd" d="M269.17 70.85c0-5.66-3.8-9.3-10.57-9.3h-6.3V80.5h6c6.58 0 10.92-3.8 10.92-9.64zm-4.23.1c0 3.32-1.84 6.27-6.53 6.27h-2.17V64.8h2.1c4.35 0 6.6 2.42 6.6 6.15z"></path>
<path d="M283.47 75.16c0-6-8.16-5.68-8.16-8.95 0-1.1 1.1-1.74 2.5-1.74a9.41 9.41 0 0 1 4.52 1.38v-3.4a9.75 9.75 0 0 0-4.79-1.15c-4.17 0-6.45 2.54-6.45 5.4a5 5 0 0 0 1.22 3.38c2.3 2.62 6.9 3 6.9 5.56 0 1.44-1.56 1.95-2.94 1.95a7.76 7.76 0 0 1-4.34-1.47l-1.53 2.85a10.65 10.65 0 0 0 6.05 1.79c3.9 0 6.95-2.16 6.95-5.6z"></path>
</svg>
</a>
</div>
</div>
</footer>
{
"breadcrumbs": [
{
"title": "Section title",
"href": "/secion"
},
{
"title": "Maecenas faucibus mollis interdum",
"href": "/section/section"
},
{
"title": "Lorem ipsum dolor sit amet consectetur adipiscing elit",
"href": "/section/section/section"
},
{
"title": "Mattis Ultricies Adipiscing Vestibulum",
"href": "/section/section/section/section"
}
],
"page_heading": {
"title": "CK editor pattern"
},
"image_featured": {
"src": "/placeholders/tiles/space.jpg",
"alt": "Night sky filled with stars"
},
"article": {
"style_lead": true,
"content": "\n <p>A lead paragraph is an introductory paragraph and can be used at the top of a page to summarise the content. Like the page title (H1), it should only be used once per page if needed.</p>\n\n\n <h2>Page introduction</h2>\n\n <p>The purpose of this pattern is to show all content types that can be added to article pages. Please refer to other article patterns for advised content layout specific to those patterns. </p>\n\n\n <h2>Blockquote</h2>\n\n <p>A blockquote is a quotation with a citation, designed to be offset from the main text on a page and is used to support content by visually highlighting a particular message or point.</p>\n\n <p>Blockquotes generally feature direct quotations which may not already be mentioned in the main body of text and are placed within the reader's flow to help brake up large amounts of text.</p>\n\n <h3>Blockquote example</h3>\n\n <blockquote>\n <p>(Blockquote) A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>\n <footer>\n <cite>(Blockquote citation) Andrew Couldwell, Laying the Foundations</cite>\n </footer>\n </blockquote>\n\n\n <h2>Highlight</h2>\n\n <p>Highlights are an excerpt of text or an article that has been pulled out and used as a visual clue to draw the eye to the text.</p>\n\n <p>They are placed within the reader's content flow and are used to direct user's attention to important pieces of information.</p>\n\n <h3>Highlight example</h3>\n\n <div class=\"text-highlight\"><p>Leeds is among the top 100 universities in the <a href=\"/\">QS World University Rankings 2021</a></p></div>\n\n\n <h2>Accordion</h2>\n\n <p>The accordion component lets users show and hide sections of content on a page. Accordions hide content, so the titles need to be clear.</p>\n\n <h3>When to use</h3>\n\n <p>Use the Accordions component to make a page easier to scan when it contains information that only some users will need.</p>\n\n <h3>When not to use</h3>\n\n <p>Accordions hide content from users and not everyone will notice them or understand how they work. For this reason, do not use an accordion for content that is essential to all users. </p>\n\n <p>Do not use the Accordions component for large amounts of content or for complex layouts. Consider if it's better to:</p>\n\n <ul>\n <li>simplify and reduce the amount of content</li>\n <li>split the content across multiple pages</li>\n <li>keep the content on a single page, separated by headings</li>\n <li>use a list of links to let users navigate quickly to specific sections of content</li>\n </ul>\n\n <p>Accordion example:</p>\n\n <h3>Why are design systems important?</h3>\n\n <div class=\"uol-accordion\"> <h3 class=\"uol-accordion__title\">Five most recent selected publications</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p> </div> </div> </div>\n\n <div class=\"uol-accordion\"> <h3 class=\"uol-accordion__title\">Conference papers</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p> </div> </div> </div>\n\n <div class=\"uol-accordion\"> <h3 class=\"uol-accordion__title\">Journal article</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p> </div> </div> </div>\n <h2>Image pair</h2>\n\n <p>The image pair component allows us to add images into an article. These images are not to act as links. Images have an optional caption. When only one image is available, this will span across the space for two.</p>\n\n <p>The image pair component should be preceeded by a heading or paragraph content.</p>\n\n <h3>Two images example (with captions)</h3>\n\n <div class=\"uol-image-pair\">\n\n <figure class=\"uol-image-pair__column\">\n <img class=\"uol-image-pair__image\" src=\"/placeholders/campus/medium/23300.jpeg\" alt=\"Caption one\">\n <figcaption class=\"uol-image-pair__caption\">Caption one</figcaption>\n </figure>\n\n <figure class=\"uol-image-pair__column\">\n <img class=\"uol-image-pair__image\" src=\"/placeholders/campus/medium/23305.jpeg\" alt=\"Caption two\">\n <figcaption class=\"uol-image-pair__caption\">Caption two</figcaption>\n </figure>\n\n </div>\n\n <h3>Two images example (no captions)</h3>\n\n <div class=\"uol-image-pair\">\n\n <figure class=\"uol-image-pair__column\">\n <img class=\"uol-image-pair__image\" src=\"/placeholders/campus/medium/23300.jpeg\" alt=\"Caption one\">\n </figure>\n\n <figure class=\"uol-image-pair__column\">\n <img class=\"uol-image-pair__image\" src=\"/placeholders/campus/medium/23305.jpeg\" alt=\"Caption two\">\n </figure>\n\n </div>\n\n <h3>One image example</h3>\n\n <p>When only one image is provided this will be cropped to maintain a 2:1 aspect ratio (vertically centred). consideration of this should be taken when choosing the image</p>\n\n <div class=\"uol-image-pair\">\n\n <figure class=\"uol-image-pair__column\">\n <img class=\"uol-image-pair__image uol-image-pair__image--single\" src=\"/placeholders/campus/medium/23300.jpeg\" alt=\"Caption one\">\n <figcaption class=\"uol-image-pair__caption\">Caption one</figcaption>\n </figure>\n\n </div>\n\n <p>Further paragraph content can follow an image pair component.</p>\n\n\n <h2>Lists</h2>\n\n <p>Ordered (Numbered) and unordered (bulleted) lists are a great way to break up content.</p>\n\n <h3>When to use</h3>\n\n <p>Ordered list: Use an ordered list when you need to display text in some ranking, hierarchy, or series of steps.</p>\n\n <h3>Ordered list example</h3>\n <ol>\n <li>Step one</li>\n <li>Step two</li>\n <li>Step three</li>\n </ol>\n\n <p>Unordered list: Use unordered lists to display text in no specific order.</p>\n\n <h3>Un-ordered list example</h3>\n <ul>\n <li>Unordered list item one</li>\n <li>Unordered list item two</li>\n <li>Unordered list item three</li>\n </ul>\n\n <p>List items help users by:</p>\n\n <ul>\n <li>aiding scanning</li>\n <li>breaking up content into useful chunks</li>\n <li>drawing their eyes to the most important information</li>\n </ul>\n\n <h3>When not to use</h3>\n\n <p>If you need to communicate long lists of narrative text.</p>\n\n\n <h2>Tables</h2>\n\n <p>Tables are containers for displaying information. They allow users to quickly scan, sort, compare and take action on large amounts of data.</p>\n\n <p>Large tables can be overwhelming for some people and can be confusing for users of assistive technology. Consider whether a table is really needed.</p>\n\n <p>A table can often be replaced by a:</p>\n\n <ul>\n <li>list of bullet points with appropriate subheadings</li>\n <li>downloadable csv spreadsheet for large amounts of data</li>\n </ul>\n\n <h3>When not to use</h3>\n\n <p>Only use tables to present data and tables should never contain images in tables.</p>\n\n <h3>When using tables</h3>\n\n <p>Use a maximum of 4 columns. This is the amount that can be comfortably displayed on a smartphone.</p>\n\n <p>Have more rows than columns wherever possible to make your table longer, rather than wider. This makes it easier for people to read and understand.</p>\n\n <h3>Table example</h3>\n\n <table>\n <thead>\n <tr>\n <th>Name of planet</th>\n <th>Average temperatre</th>\n <th>Average distance from the sun </th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Mercury</td>\n <td>-183°C to 427°C</td>\n <td>57,900,00 km</td>\n </tr>\n <tr>\n <td>Venus</td>\n <td>480°C</td>\n <td>108,160,000 km </td>\n </tr>\n <tr>\n <td>Earth</td>\n <td>14°C</td>\n <td>149,600,000 km</td>\n </tr>\n <tr>\n <td>Mars</td>\n <td>-63°C</td>\n <td>227,936,640 km</td>\n </tr>\n </tbody>\n </table>\n\n\n <h2>Images</h2>\n\n <p>Images are an important part of any web experience. They carry a huge amount of value and do more than add decoration.</p>\n\n <p>They let us convey ideas much faster than text, help tell powerful stories and engage with our users in ways that few other forms of content can. Images should support each message clearly and help to deliver an engaging user experience.</p>\n\n <h3>Image example</h3>\n\n <figure>\n <img alt=\"Polar bear with cubs on ice sheet\" src=\"/placeholders/ph-news-14.jpg\">\n <figcaption>Picture credit: <a href=#>The person who has taken this photograph</a></figcaption>\n </figure>\n\n\n <h2>Video</h2>\n\n <p>Videos convey ideas much faster than text, which helps us tell powerful stories and engage with our users. Some people find videos much easier to understand.</p>\n\n <h3>When using videos</h3>\n\n <p>To meet the accessibility regulations for public sector organisations, all new videos published or updated after 23 September 2020 must have this alternative content:</p>\n\n <ul>\n <li>an audio description</li>\n <li>closed captions</li>\n <li>a transcript</li>\n </ul>\n\n <h3>Video example</h3>\n\n <iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/AjvkAkHZAzc\" title=\"YouTube video player - Studying abroad\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n\n\n <h2>Calls to action (CTA)</h2>\n\n <p>We allow users to perform certain actions through the use of our call to actions (CTAs). It should always be clear to the user what the CTA's action is through text.</p>\n\n <h3>When using CTA's</h3>\n\n <p>Try not to have multiple CTA's next to each other.</p>\n <p>Don't overload the page with the same type of CTA or too many CTA's.</p>\n\n <h2>CTA example</h2>\n <div class=\"uol-in-text-cta\">\n <h2 class=\"uol-in-text-cta__heading\">\n <a class=\"uol-in-text-cta__link\" href=\"/home\">In text CTA widget title</a>\n </h2>\n <p class=\"uol-in-text-cta__text\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>\n </div>\n\n\n <h2>Logo group</h2>\n\n <p>The Logo Group enables 1+ logos to be displayed in an article.</p>\n\n <p>They are placed within the content and are used to showcase a logo/group of logos, such as accreditation logos.</p>\n\n <h3>When using the Logo Group</h3>\n\n <p>Upload a closely cropped logo</p>\n\n <p>Add a caption</p>\n\n <h3>Logo group example</h3>\n\n <div class=\"uol-logo-group\">\n\n <div class=\"uol-logo-group-item\">\n <div class=\"uol-logo-group-item__container\">\n <img class=\"uol-logo-group-item__logo\" src=\"/placeholders/ph-accreditation-04.svg\" alt=\"Association of MBAs\">\n </div>\n <a class=\"uol-logo-group-item__link\" href=\"/link-1\">Association of MBAs</a>\n </div>\n\n <div class=\"uol-logo-group-item\">\n <div class=\"uol-logo-group-item__container\">\n <img class=\"uol-logo-group-item__logo\" src=\"/placeholders/ph-accreditation-05.svg\" alt=\"EFMD\">\n </div>\n <a class=\"uol-logo-group-item__link\" href=\"/link-2\">EFMD</a>\n </div>\n\n <div class=\"uol-logo-group-item\">\n <div class=\"uol-logo-group-item__container\">\n <img class=\"uol-logo-group-item__logo\" src=\"/placeholders/ph-accreditation-06.svg\" alt=\"AACSB\">\n </div>\n <a class=\"uol-logo-group-item__link\" href=\"/link-3\">AACSB</a>\n </div>\n\n <div class=\"uol-logo-group-item\">\n <div class=\"uol-logo-group-item__container\">\n <img class=\"uol-logo-group-item__logo\" src=\"/placeholders/ph-accreditation-07.svg\" alt=\"University of Leeds\">\n </div>\n <a class=\"uol-logo-group-item__link\" href=\"/link-4\">University of Leeds</a>\n </div>\n\n </div>\n\n <h3>Two images example (no captions)</h3>\n\n <div class=\"uol-image-pair\">\n\n <figure class=\"uol-image-pair__column\">\n <img class=\"uol-image-pair__image\" src=\"/placeholders/campus/medium/23300.jpeg\" alt=\"Caption one\">\n </figure>\n\n <figure class=\"uol-image-pair__column\">\n <img class=\"uol-image-pair__image\" src=\"/placeholders/campus/medium/23305.jpeg\" alt=\"Caption two\">\n </figure>\n\n </div>\n \n <h2>In Text Icons</h2>\n <p>In text icons introductory paragraph.</p>\n <ul class=\"in-text-icons\">\n\n <li class=\"in-text-icon uol-icon uol-icon--mdiWifi\">Fast Wi-Fi</li>\n <li class=\"in-text-icon uol-icon uol-icon--mdiDumbbell\">On-site gym</li>\n <li class=\"in-text-icon uol-icon uol-icon--mdiSofaSingleOutline\">Common room and study area testing out long text</li>\n <li class=\"in-text-icon uol-icon uol-icon--mdiSoccer\">University sport</li>\n <li class=\"in-text-icon uol-icon uol-icon--mdiParking\">Parking</li>\n <li class=\"in-text-icon uol-icon uol-icon--mdiGrill\">Outdoor social space</li>\n\n </ul>\n\n <h2>In Text facts</h2>\n\n <p>The In Text Facts component highlights 1-2 key facts or figures in an article.</p>\n\n <p>They are placed within the content and are used to direct the user's attention to a key fact, such as a ranking or award.</p>\n\n <h3>When using In Text Facts</h3>\n\n <p>Do not reformat the text style.</p>\n\n <p>Add an short headline for the title e.g. 'Top 10' and display the rest of the information underneath in the subtitle.</p>\n\n <div class=\"uol-in-text-facts\">\n <h3 class=\"uol-in-text-facts__title\">Two items, one with link</h3>\n <div class=\"uol-in-text-facts__container\">\n <a href=\"/facts-url\" class=\"uol-in-text-fact__item uol-in-text-fact__link\">\n <h4 class=\"uol-in-text-fact__item__title\">With link</h4>\n <p class=\"uol-in-text-fact__item__description\">In text facts item description</p>\n </a>\n <div class=\"uol-in-text-fact__item\">\n <h4 class=\"uol-in-text-fact__item__title\">Without link</h4>\n <p class=\"uol-in-text-fact__item__description\">In text facts item description</p>\n </div>\n </div>\n </div>\n\n\n <h2>Heading before linked list</h2>\n\n <ul class=\"uol-linked-list\">\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-1\">School of Typography</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-2\">School of Web Design</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-3\">School of Branding</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-4\">School of Fine Art History of Art and Print Illustration</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-5\">School of Media Queries</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-6\">School of Media and Communications</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-7\">School of New CSS Tricks</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-8\">School of Console Commands</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-9\">School of Front-end Development</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-10\">Institute of Accessibility for Everyone</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-11\">Institute of Content Design</a> </li></ul>\n <h2>Heading after linked list</h2> <p> Paragraph of text before the linked list. 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><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, eligendi hic consectetur non soluta tempora expedita veritatis nam quia ab eos. Non praesentium tempore ad officia esse dolorum, nulla optio.</p>\n <ul class=\"uol-linked-list\">\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-1\">School of Typography</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-2\">School of Web Design</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-3\">School of Branding</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-4\">School of Fine Art History of Art and Print Illustration</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-5\">School of Media Queries</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-6\">School of Media and Communications</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-7\">School of New CSS Tricks</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-8\">School of Console Commands</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-9\">School of Front-end Development</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-10\">Institute of Accessibility for Everyone</a> </li>\n <li class=\"uol-linked-list__item\"> <a class=\"uol-linked-list__link\" href=\"/item-11\">Institute of Content Design</a> </li></ul>"
},
"section_nav": {
"title": "Undergraduate",
"items": [
{
"title": "Overview",
"url": "/overview"
},
{
"title": "Academic experience",
"url": "/academic experience",
"items": [
{
"title": "Learning and teaching",
"url": "/learning_and_teaching"
},
{
"title": "Academic facilities",
"url": "/academic_facilities"
}
]
},
{
"title": "Enrichment opportunities",
"url": "/enrichment_opportunities",
"items": [
{
"title": "Study abroad",
"url": "/study_abroad"
},
{
"title": "Work experience",
"url": "/work_experience"
},
{
"title": "Clubs and societies",
"url": "/clubs_and_societies"
},
{
"title": "Student enterprise",
"url": "/student_enterprise"
}
]
},
{
"title": "Your future",
"url": "/your_future",
"items": [
{
"title": "Careers",
"url": "/careers"
},
{
"title": "Leeds for Life",
"url": "/leeds_for_life"
}
]
},
{
"title": "Campus life",
"url": "/campus_life",
"items": [
{
"title": "City life",
"url": "/city_life",
"items": [
{
"title": "Overview",
"url": "/city_life/overview"
}
]
},
{
"title": "Wellbeing and support",
"url": "/wellbeing_and_support"
},
{
"title": "Sport and fitness",
"url": "/sport_and_fitness"
},
{
"title": "A global university",
"url": "/a_global_university"
}
]
},
{
"title": "Fees and costs",
"url": "/fees_and_costs",
"items": [
{
"title": "Undergraduate fees",
"url": "/undergraduate_fees"
},
{
"title": "Additional costs",
"url": "/additional_costs"
},
{
"title": "Living expenses",
"url": "/living_expenses"
},
{
"title": "Tuition fee liability",
"url": "/tuition_fee_liability"
},
{
"title": "Tuition fee payment schedule",
"url": "/tuition_fee_payment_schedule"
},
{
"title": "How to pay",
"url": "/how_to_pay"
},
{
"title": "Sponsored students",
"url": "/sponsored_students"
},
{
"title": "Paying for your accommodation",
"url": "/paying_for_your_accommodation"
}
]
},
{
"title": "Funding",
"url": "/funding",
"items": [
{
"title": "Overview",
"url": "/funding"
},
{
"title": "University scholarships and funding",
"url": "/university_scholarships_and_funding",
"items": [
{
"title": "Leeds financial support",
"url": "/leeds_financial_support",
"items": [
{
"title": "Leeds financial support eligibility",
"url": "/leeds_financial_support_eligibility"
},
{
"title": "How much is it worth?",
"url": "/how_much_is_it_worth"
},
{
"title": "Choosing your support",
"url": "/choosing_your_support"
}
]
},
{
"title": "Scholarships | personal circumstances",
"url": "/scholarships_personal_circumstances",
"items": [
{
"title": "Scholarships",
"url": "/scholarships_personal_circumstances/scholarships"
},
{
"title": "Scholarships FAQs",
"url": "/scholarships_personal_circumstances/scholarships_faqs"
}
]
},
{
"title": "Scholarships | academic achievement",
"url": "/scholarships_academic_achievement"
}
]
},
{
"title": "Student loans and bursaries",
"url": "student_loans_and_bursaries",
"items": [
{
"title": "What help is available?",
"url": "/what_help_is_available"
},
{
"title": "Eligibility and applications",
"url": "/eligibility_and_applications"
},
{
"title": "Tuition fee loans for new part-time students",
"url": "/tuition_fee_loans_for_new_part-time_students"
},
{
"title": "NHS funding",
"url": "/nhs_funding"
},
{
"title": "Financial support for Muslim students",
"url": "/financial_support_for_muslim_students"
}
]
},
{
"title": "International funding",
"url": "/international_funding"
},
{
"title": "Government part-time maintenance loans",
"url": "/government_part-time_maintenance_loans"
},
{
"title": "Extra financial help",
"url": "/extra_financial_help"
},
{
"title": "Funds available after you arrive",
"url": "/funds_available_after_you_arrive"
}
]
},
{
"title": "Applying",
"url": "/applying",
"items": [
{
"title": "How to apply",
"url": "/how_to_apply"
},
{
"title": "Accepted qualifications",
"url": "/accepted_qualifications"
},
{
"title": "Application timetable",
"url": "/application_timetable"
},
{
"title": "Writing your personal statement",
"url": "/writing_your_personal_statement"
},
{
"title": "Alternative admissions",
"url": "/alternative_admissions"
},
{
"title": "Care leavers and estranged students",
"url": "/care_leavers_and_estranged_students"
},
{
"title": "Applying FAQs",
"url": "/applying_faqs"
},
{
"title": "Transparency data",
"url": "/transparency_data"
},
{
"title": "Degree outcomes statement",
"url": "/degree_outcomes_statement"
},
{
"title": "Declaring criminal convictions",
"url": "/declaring_criminal_convictions"
}
]
},
{
"title": "Types of course",
"url": "/types_of_course",
"items": [
{
"title": "Part-time and mature students",
"url": "/part-time_and_mature_students"
},
{
"title": "Joint honours",
"url": "/joint_honours"
},
{
"title": "Foundation courses",
"url": "/foundation_courses"
},
{
"title": "Intercalating and Integrated Masters",
"url": "/intercalating_and_integrated_masters"
}
]
},
{
"title": "Teachers and advisors",
"url": "/teachers_and_advisors",
"items": [
{
"title": "Overview",
"url": "/teachers_and_advisors"
},
{
"title": "Supporting students",
"url": "HE talks and workshops",
"items": [
{
"title": "HE talks and workshops",
"url": "/he_talks_and_workshops"
},
{
"title": "Subject-specific outreach",
"url": "/subject-specific_outreach"
},
{
"title": "Online courses for schools",
"url": "/online_courses_for_schools"
},
{
"title": "Live webinars for schools and colleges",
"url": "/live_webinars_for_schools_and_colleges"
},
{
"title": "Research and study skills",
"url": "/research_and_study_skills"
},
{
"title": "Alternative admissions",
"url": "/alternative_admissions"
}
]
},
{
"title": "Supporting teachers and advisors",
"url": "/supporting_teachers_and_advisors",
"items": [
{
"title": "Teachers and advisors CPD webinars",
"url": "/teachers_and_advisors_cpd_webinars"
},
{
"title": "Talks in schools",
"url": "/talks_in_schools"
},
{
"title": "IntoUniversity",
"url": "/intouniversity"
},
{
"title": "Students into schools",
"url": "/students_into_schools"
},
{
"title": "EPQ Virtual Conference",
"url": "/epq_virtual_conference"
}
]
}
]
},
{
"title": "Parents and carers",
"url": "/parents_and_carers",
"items": [
{
"title": "Supporting your son or daughter",
"url": "/supporting_your_son_or_daughter"
},
{
"title": "Tips for parents",
"url": "/tips_for_parents"
},
{
"title": "Parents FAQs",
"url": "/parents_faqs"
}
]
}
]
},
"section_ctas": {
"title": "Discover Leeds",
"links": [
{
"href": "/cta-link-1",
"text": "Open days"
},
{
"href": "/cta-link-2",
"text": "Visit us"
},
{
"href": "/cta-link-3",
"text": "Virtual campus tour"
},
{
"href": "/cta-link-4",
"text": "Covid-19 FAQs for applicants and offer holders"
}
]
},
"section_related": {
"title": "Related content",
"items": [
{
"heading": {
"text": "Meet our students",
"url": "/meet-our-students"
},
"content": "Hear from some of our undergraduates about some of the exciting things they've done to make the most of their student experience Hear from some of our undergraduates about some of the exciting things"
},
{
"heading": {
"text": "Meet our staff",
"url": "/meet-our-staff"
},
"content": "We understand that applicants and offer holders may have concerns about the ongoing coronavirus (COVID-19) situation and your plans to study with us at Leeds."
},
{
"heading": {
"text": "Admissions Enquiries"
},
"links": [
{
"type": "phone",
"label": "+44 (0)113 3433213",
"url": "+441133433212"
},
{
"type": "email",
"label": "Study@leeds.ac.uk",
"url": "study@leeds.ac.uk"
}
]
}
]
}
}