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’, ‘form-map’ |
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.
Headings H2 - 6 Intro paragraph Paragraph Category (link) Images - single and multiple Videos - single and multiple Blockquote Highlight Accordians Lists (ordered and unordered) Tables Links CTA (Calls to action button) - editable to be dispalyed anywhere within the content block. Related events suppliment Side navigation
Related news suppliment Multi page document (previous /next) Marketing profile suppliment Pullquotes
(See page heading component and context tab for config structure)
Must have at least one paragraph.
Other information as per the default options above
(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 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.
This variant of the article pattern is currently only used for the buildings and rooms page and should not be used for anything else. Example: @uol-example-article–buildings-and-rooms
<div class="uol-article-container uol-col-container">
{% if article_highlight %}
{% render '@uol-article-highlight', { article_highlight: article_highlight } %}
{% endif %}
{% render '@uol-side-nav-container' %}
<main id="main" tabindex="-1" class="uol-article {{ 'uol-article--' + article_type if article_type }}">
{% if article_type == "person-insight" %}
<div class="uol-article__head">
<div class="uol-article__head__heading-text">
{% render '@uol-page-heading', { page_heading: page_heading } %}
{% render '@uol-info-list', { info_list: info_list } %}
</div>
{% render '@uol-profile-image', { profile_image: profile_image } %}
</div>
<div class="uol-article__content">
{% render '@uol-image-featured', { image_featured: image_featured } %}
{% render '@uol-article-content', { article: article } %}
{% render '@uol-article-section', { sections: sections } %}
</div>
{% elseif article_type == "form-map" %}
<div class="uol-article__head">
{% render '@uol-page-heading', { page_heading: page_heading } %}
{% render '@uol-cms-container', { content: rich_text_content,
lead: rich_text_lead } %}
</div>
<div class="uol-article__content">
<div class="uol-rich-text">
{% render '@uol-form', { form: form } %}
{% render '@uol-iframe', { iframe: iframe } %}
</div>
{% render '@uol-info-list', { info_list: info_list } %}
{% render '@uol-image-featured', { image_featured: image_featured } %}
{% render '@uol-article-content', { article: article } %}
{% render '@uol-article-section', { sections: sections } %}
{% render '@uol-accordion', { accordions: accordions } %}
</div>
{% else %}
<div class="uol-article__head">
{% if profile_image %}
<div class="uol-article__head__image-container">
{% render '@uol-profile-image', { profile_image: profile_image } %}
</div>
{% render '@uol-page-heading', { page_heading: page_heading } %}
{% else %}
<div class="uol-article__no-profile-image">
{% render '@uol-page-heading', { page_heading: page_heading } %}
</div>
{% endif %}
</div>
<div class="uol-article__content">
{% render '@uol-info-list', { info_list: info_list } %}
{% render '@uol-image-featured', { image_featured: image_featured } %}
{% render '@uol-article-content', { article: article } %}
{% render '@uol-article-section', { sections: sections } %}
{% render '@uol-accordion', { accordions: accordions } %}
</div>
{% endif %}
{% for supplement in supplements %}
{% render '@uol-supplement-' + supplement.type, supplement.context %}
{% endfor %}
{% if widgets | length %}
<div class="uol-article__widgets">
{% for widget in widgets %}
{% render '@uol-widget-' + widget.type, {
widget_title: widget.title,
events: widget.events,
cards: widget.cards
} %}
{% endfor %}
</div>
{% endif %}
</main>
</div>
<div class="uol-article-container uol-col-container">
<div class="uol-side-nav-container"></div>
<main id="main" tabindex="-1" class="uol-article uol-article--news">
<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">Space research aims to boost Yorkshire economy</span>
</h1>
<dl class="page-heading__meta">
<div class="page-heading__meta__group">
<dt class="page-heading__meta__term">Category</dt>
<dd class="page-heading__meta__data">
<a class="page-heading__meta__data__link" href="/category/environment">
Environment
</a>
</dd>
</div>
<div class="page-heading__meta__group">
<dt class="page-heading__meta__term">Date</dt>
<dd class="page-heading__meta__data">
<time datetime="2020-10-07 20:00">
7 October 2020
</time>
</dd>
</div>
</dl>
</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>The University is to help spearhead a national programme of technological revolution backed by the UK Space Agency.</p>
<p>World-leading research in climate change, space and planetary science, navigation and transport, advanced computer techniques and instrumentation design is already carried out at Leeds Academics are working on global issues ranging from air quality, weather forecasting and sea level impact to flood alerts, earthquakes and polar glaciers.</p>
<div aria-hidden="true" class="uol-typography-pull-quote uol-typography-pull-quote--left">
<p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub.</p>
</div>
<p>Now that expertise will underpin an ambitious programme which aims to bring together development and investment in new digital and space-related technology approaches.</p>
<p>The project will see the University, Leeds City Region Local Enterprise Partnership (LEP) and other partners work together to further develop an emerging Local Space Hub across West Yorkshire, including Bradford, Calderdale, Kirklees, Leeds and Wakefield.</p>
<p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub in these West Yorkshire regions over the next five to ten years.</p>
<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>
<p>World-leading research in climate change, space and planetary science, navigation and transport, advanced computer techniques and instrumentation design is already carried out at Leeds Academics are working on global issues ranging from air quality, weather forecasting and sea level impact to flood alerts, earthquakes and polar glaciers. Now that expertise will underpin an ambitious programme which aims to bring together development and investment in new digital and space-related technology approaches.</p>
<blockquote>
<p>A successful design system liberates the team from reinventing the wheel. It allows you to focus on what really matters</p>
<footer>
<cite>Andrew Couldwell, Laying the Foundations</cite>
</footer>
</blockquote>
<p>Dr Anna Hogg, University Academic Fellow and Earth observation expert at <a href=#>Leeds' School of Earth and Environment</a>, said space activity such as examining satellite data was essential for monitoring the Earth's climate.</p>
<div aria-hidden="true" class="uol-typography-pull-quote uol-typography-pull-quote--left">
<p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub</p>
</div>
<p>“This enables us to measure pollutants in the air we breathe, the health of forests and crops, and the speed of colossal glaciers on the Antarctic Ice Sheet that cause sea levels to rise,” she said.</p>
<p>“This work will be of great benefit to the local, national, and international Space community for years to come.
<p>“As a scientist, it's my job to discover something new about how the world works every day. I can't think of a more meaningful or exciting career to pursue.”</p>
<p>The six-month programme, supported by £80,000 in funding from the UK Space Agency (UKSA), is one of seven projects announced today.</p>
<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>
<p>Science Minister Amanda Solloway said: “The UK's space sector has shown incredible resilience to the coronavirus pandemic and will continue to play a key role in our recovery – from creating high quality jobs to finding unique ways to support our NHS.</p>
<div aria-hidden="true" class="uol-typography-pull-quote uol-typography-pull-quote--left">
<p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub</p>
</div>
<p>“This funding will arm local leaders up and down the UK with the tools they need to put their local areas at the front of the commercial space race, while refuelling the tank of the UK economy and helping Britain realise its ambitions as a global space superpower.”</p>
<p>In the last decade, space has transformed into one of the UK's fastest sectors. The UK space industry now employs close to 42,000 people nationally and generates income of nearly £15 billion every year.</p>
<p>Professor Nick Plant, Deputy Vice-Chancellor: Research and Innovation at the University, said: “Challenge-led innovation sits at the heart of national and international research networks.</p>
<p>“The UK has world-leading expertise in the space sector, and the University of Leeds is proud to be supporting entrepreneurship in the North, through the development of a regional space hub here in the Leeds City Region.”</p>
<blockquote>
<p>99.9 per cent of our objects to climate change have nothing to do with the science. They have everything to do solution aversion.</p>
</blockquote>
<p>If harnessed as part of a Local Space Hub, these businesses have the potential to set the Leeds City Region apart from other areas both in the UK and globally.</p>
<figure>
<img alt="International Space Station" src="/placeholders/ph-news-15.jpg">
<figcaption>There is gravity on the International Space Station, but astronauts appear to be weightless because both the space station and the astronauts are in free fall. <a href=#>Picture credit: ESA</a></figcaption>
</figure>
<p>Among those supporting the Local Space Hub is Matthew Bray, CEO of SatSense - a University of Leeds spin-out company that uses satellite data to monitor ground movement across the UK.</p>
<p>He said: “As a growing tech start-up with innovation at our core - access to talent, resources and customers are central to our needs.
<p>“We're proud to call Leeds home, as there is no better place to meet our current needs and ambitious plans for the future.”</p>
<p>Mandy Ridyard, board member of the Leeds City Region LEP and CEO of Bradford-based aerospace engineering company Produmax said: “This dynamic initiative aims to develop a world-leading regional space hub.</p>
<p>“Accelerating economic growth through technology and innovation is a priority for the Leeds City Region LEP, and this exciting work will create new opportunities by harnessing the world-class expertise and talent already in our region.”</p>
<table>
<caption>Table of planetary statistics</caption>
<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>Further information</h2>
<p>Dr Anna Hogg is co-director of the <a href=#>NERC SENSE Centre for Doctoral Training</a> which is training 50 new PhD students to become Earth observation experts. Applications for SENSE PhD studentships are currently open.</p>
<p>For further details, contact University of Leeds press officer <a href=mailto:example@example.com>i.rosser@leeds.ac.uk</a></p>
</div>
</div>
</main>
</div>
Article default
- [ ] Article image full width at >=600px <768
- [ ] Check if full width also applies to video embeds
- [ ] Work out how to handle less than full with images
$section-debug-colour: rgba(rgb(111, 243, 115), 0.2);
.uol-article-container {
padding: 0 $spacing-2;
margin: $spacing-2 0 $spacing-8;
@include media(">=uol-media-m") {
margin: $spacing-3 0 $spacing-9;
padding: 0 $spacing-4;
}
@include media(">=uol-media-l") {
margin: $spacing-3 0 6rem;
padding: 0 $spacing-4;
.uol-side-nav-container--populated {
padding: $spacing-3 14px $spacing-3 $spacing-2;
}
}
@include media(">=uol-media-xl") {
margin: $spacing-4 0 $spacing-9;
padding: 0 $spacing-4;
.uol-side-nav-container--populated {
padding: $spacing-4;
}
}
.uol-side-nav-container--populated + .uol-article {
@include media(">=uol-media-l") {
max-width: calc(100% / 12 * 8 - 2rem);
flex-basis: calc(100% / 12 * 8 - 2rem);
padding-left: calc(100% / 12 + 1rem) !important;
}
.uol-article__head,
.uol-article__content {
@include media(">=uol-media-l") {
margin-right: 0;
margin-left: 0;
}
}
}
}
.uol-article {
// cancel out padding from columns container
padding-bottom: 0 !important;
padding-left: 8px !important;
padding-right: 8px !important;
@include media(">=uol-media-m") {
padding-left: 4px !important;
padding-right: 4px !important;
}
@include media(">=uol-media-l") {
padding-left: 8px !important;
padding-right: 8px !important;
}
@include media(">=uol-media-xl") {
padding-left: 16px !important;
padding-right: 16px !important;
}
max-width: calc(100% - 1rem);
@include page-width("wide");
@include media(">=uol-media-l") {
max-width: calc(100% - 1.75rem);
}
@include media(">=uol-media-xl") {
max-width: calc(100% - 2rem);
}
.uol-article__head,
.uol-article__content {
@include media(">=uol-media-l") {
margin-right: calc(100% / 12 * 3);
margin-left: calc(100% / 12 + 0.25rem);
}
@include media(">=uol-media-xl") {
margin-right: calc(100% / 12 * 3 + 0.5rem);
margin-left: calc(100% / 12 + 0.25rem);
}
}
.uol-rich-text {
> *:last-child {
margin-bottom: 0;
}
@include media(">=uol-media-l") {
max-width: inherit;
margin-right: calc(100% / 8 * 1 + 0.125rem);
}
@include media(">=uol-media-xl") {
margin-right: calc(100% / 8 * 2 + 0.5rem);
}
img:not(.uol-logo-group-item__logo) {
max-width: none;
}
figure {
@include media(">=uol-media-m") {
margin-top: $spacing-7;
}
}
.uol-gallery figure {
@include media(">=uol-media-m") {
margin-top: 0;
}
}
.text-highlight p {
margin-bottom: 0;
}
blockquote {
footer {
margin-bottom: $spacing-4;
}
}
}
.uol-rich-text--with-lead {
// Add accent to lead paragraph
> p:first-of-type {
margin-top: $spacing-5;
margin-bottom: $spacing-4;
@include media(">=uol-media-m") {
position: relative;
margin-top: 2.5rem;
margin-bottom: $spacing-5;
&::before {
content: "";
display: inline-block;
position: absolute;
width: calc(100% / 12 - #{$spacing-1});
height: $spacing-1;
top: 0.65em;
left: -18px;
transform: translateX(-100%);
background-color: $color-brand;
}
}
@include media(">=uol-media-l") {
&::before {
width: calc(100% / 7 - 20px);
left: -28px;
}
}
@include media(">=uol-media-xl") {
&::before {
width: calc(100% / 6 - 28px);
left: -36px;
}
}
}
}
.uol-side-nav-container--populated + & {
.uol-typography-pull-quote {
@include media(">=uol-media-l") {
margin-right: 0;
}
@include media(">=uol-media-xl") {
position: absolute;
max-width: calc(100% / 9 * 2 - 2rem);
right: $spacing-4;
}
}
}
blockquote {
margin-bottom: $spacing-5;
@include media(">=uol-media-m") {
margin-bottom: $spacing-6;
}
}
.uol-typography-pull-quote {
display: block;
}
ul, ol {
margin: $spacing-6 0;
@include media(">=uol-media-m") {
margin: $spacing-7 0;
}
}
.uol-typography-pull-quote {
margin: $spacing-6 0;
@include media(">=uol-media-m") {
margin: $spacing-7 0;
}
@include media(">=uol-media-xl") {
margin: 0 0 $spacing-7;
}
}
blockquote + * , .uol-typography-pull-quote + * {
// background-color: yellow;
margin-top: 0;
}
.uol-featured-image {
@include media("<=uol-media-xs") {
margin-right: -#{$spacing-4};
margin-left: -#{$spacing-4};
max-width: none;
}
@include media(">uol-media-xs", "<uol-media-s") {
margin-right: -#{$spacing-5};
margin-left: -#{$spacing-5};
max-width: none;
}
@include media(">=uol-media-s", "<uol-media-m") {
margin-right: -13%;
margin-left: -13%;
}
img {
@extend .uol-featured-image__img;
}
}
.uol-featured-image__caption,
figcaption {
@extend .uol-featured-image__caption;
}
.uol-table-outer {
margin: $spacing-4 0 $spacing-6;
@include media(">=uol-media-l") {
margin: $spacing-4 0 $spacing-7 ;
}
.uol-table-container {
max-width: none;
}
table {
margin-bottom: 0;
}
}
img {
display: block;
margin: $spacing-6 0;
@include media(">=uol-media-m") {
margin: $spacing-7 0;
}
}
.uol-typography-pull-quote {
box-sizing: border-box;
width: 100%;
max-width: 100%;
.uol-col-debug & {
background: $section-debug-colour;
}
@include media(">=uol-media-xl") {
float: none;
position: absolute;
right: calc(1rem + 100%/12 * 3);
max-width: calc(100% / 12 * 2 - 2rem);
}
}
.uol-info-list-container {
margin: $spacing-6 0;
@include media(">=uol-media-m") {
margin: $spacing-7 0;
}
}
.uol-publications-list .uol-info-list-container {
margin: 0;
}
.uol-featured-image {
margin: $spacing-6 0;
@include media(">=uol-media-m") {
margin: $spacing-7 0;
}
}
.uol-featured-image__img {
margin: 0;
}
.uol-cards__card__image {
margin: 0 }
.uol-info-list {
margin: 0;
}
.uol-accordion__title {
margin: 0 !important;
}
}
// end of uol-article (generic)
.uol-article--news {
.page-heading__title {
margin-bottom: $spacing-4;
}
.page-heading__meta__group:first-child {
margin-bottom: $spacing-2;
}
}
// end of uol-article--news
.uol-article--event {
.uol-info-list-container {
.uol-col-debug & {
background: $section-debug-colour;
}
}
.uol-info-list {
@include media(">=uol-media-xl") {
margin: 0;
}
}
}
// end of uol-article--event
.uol-article--profile {
margin-top: 8px;
@include media(">=uol-media-m") {
margin-top: 16px;
}
@include media(">=uol-media-l") {
margin-top: 24px;
}
.page-heading__title:before {
top: -24px;
@include media(">=uol-media-m") {
top: -32px;
}
}
.uol-article__head {
flex-direction: column;
.uol-article__no-profile-image {
// background-color: lightblue;
width: 100%;
@include media(">=uol-media-s") {
margin-left: calc((100% + #{$col-gutter-s}) / 11 * 1 );
// margin-left: 0;
}
@include media(">=uol-media-m") {
margin-left: calc((100% + #{$col-gutter-m}) / 11 * 1 );
// margin-left: 0;
}
@include media(">=uol-media-l") {
margin-left: calc((100% + #{$col-gutter-l} + 8px) / 9 * 2 );
}
@include media(">=uol-media-xl") {
margin-left: calc((100% + #{$col-gutter-xl} + 8px) / 9 * 3 );
}
}
@include media(">=uol-media-s") {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 0;
margin-right: 0;
}
.uol-article__head__image-container {
background: linear-gradient(90deg, $color-brand--dark 72px, rgba(255,255,255,0) 0);
padding: 16px 0 16px 32px;
border-radius: 6px;
margin-bottom: 48px;
width: 192px;
@include media(">=uol-media-s") {
padding-right: 0;
margin-bottom: 0;
margin-right: 16px;
}
@include media(">=uol-media-m") {
margin-left: -4px;
margin-right: 16px;
width: 204px;
}
@include media(">=uol-media-l") {
margin-left: 0;
margin-right: 24px;
padding-right: 0;
}
@include media(">=uol-media-xl") {
background: linear-gradient(90deg, $color-brand--dark 96px, rgba(255,255,255,0) 0);
padding: 0 0 0 32px;
margin-right: 0;
margin-left: calc((100% + #{$col-gutter-l} + 8px) / 9 * 1 );
width: inherit;
}
.uol-profile-image {
.uol-profile-image__img {
width: 192px;
height: 192px;
padding-bottom: 0;
@include media(">=uol-media-m") {
width: 204px;
height: 204px;
}
@include media(">=uol-media-l") {
width: 196px;
height: 196px;
margin-right: #{$col-gutter-l}
}
@include media(">=uol-media-xl") {
width: 266px;
height: 266px;
margin-right: #{$col-gutter-xl}
}
@include media(">=uol-media-xxl") {
width: 311px;
height: 311px;
}
}
}
}
}
// .uol-info-list-container {
// @include media(">=uol-media-xl") {
// // fix to make info list be close to page heading without ammending markup
// margin-top: -100px;
// }
// }
.uol-article__head {
// background-color: pink;
margin-right: calc((100% + #{$col-gutter-m} + 8px) / 12 * 1 - 8px);
@include media(">=uol-media-l") {
margin-right: calc((100% + #{$col-gutter-l} + 8px) / 12 * 3 - 8px);
}
@include media(">=uol-media-xl") {
margin-right: calc((100% + #{$col-gutter-xl} + 8px) / 12 * 3 - 4px);
}
}
.uol-article__content {
@include media(">=uol-media-l") {
margin-right: calc((100% + #{$col-gutter-l} + 8px) / 12 * 3 - 8px);
margin-left: calc((100% + #{$col-gutter-l} + 8px) / 12 * 2 );
}
@include media(">=uol-media-xl") {
margin-right: calc((100% + #{$col-gutter-xl} + 8px) / 12 * 3 - 4px);
margin-left: calc((100% + #{$col-gutter-xl} + 8px) / 12 * 3 );
}
.uol-info-list-container {
padding-bottom: 48px;
border-bottom: 0.25rem solid #c70000;
}
.uol-publications-list .uol-info-list-container {
padding-bottom: 0;
border-bottom: none;
}
}
.uol-article-section {
margin-right: 0;
.uol-rich-text {
margin-right: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: $spacing-6 0 $spacing-2;
@include media(">=uol-media-m") {
margin: $spacing-7 0 $spacing-4;
}
}
@include media(">=uol-media-xl") {
display: flex;
flex-direction: row;
margin-left: calc(((100% + #{$col-gutter-xl} + 8px) / 6 * 3 ) * -1);
margin-top: $spacing-7;
.uol-article-section__content {
width: calc(((100% + #{$col-gutter-xl}) / 9 * 6 ) * 1 - #{$col-gutter-xl});
& .uol-accordion:first-child {
margin-top: 0;
}
}
.uol-article-section__title {
margin-right: 0;
}
}
.uol-article-section__title {
@extend .uol-typography-heading-3;
@include media(">=uol-media-xl") {
width: calc((100% + #{$col-gutter-xl} + 8px) / 9 * 3 - #{$col-gutter-xl});
margin-right: #{$col-gutter-xl};
margin-top: 0;
text-align: right;
}
}
}
}
// end of uol-article--profile
.uol-article--person-insight {
.uol-article__head {
display: flex;
justify-content: space-between;
border-bottom: $spacing-1 solid $color-brand;
margin-bottom: $spacing-6;
@include media(">=uol-media-m") {
margin-bottom: $spacing-7;
}
}
.uol-article__head__heading-text {
@include media(">=uol-media-s") {
min-height: calc(24px + 144px + 32px); // 24px for gap above red accent, 144px for image, min 32px below
}
@include media(">=uol-media-m") {
min-height: calc(24px + 192px + 32px);
}
@include media(">=uol-media-l") {
min-height: calc(24px + 192px + 48px);
}
@include media(">=uol-media-xl") {
min-height: calc(24px + 288px + 48px);
}
}
.page-heading {
width: 100%;
margin-bottom: 0;
.page-heading__meta__group {
margin-bottom: 0;
}
}
.uol-info-list {
margin: 32px 0;
}
.uol-profile-image {
width: 96px;
top: $spacing-5;
margin-left: $spacing-4;
@include media(">=uol-media-s") {
width: 144px;
}
@include media(">=uol-media-m") {
width: 192px;
}
@include media(">=uol-media-xl") {
width: 288px;
}
}
}
// end of uol-article--person-insight
// Items following headings CSS
// TODO: remove dependency on !important tags
.uol-rich-text :is(h1, h2, h3, h4, h5, h6) + {
ol,
ul
{
margin-top: $spacing-2 !important;
}
.uol-logo-group,
.uol-in-text-facts__container,
.uol-in-text-cta,
.uol-accordion,
.uol-image-pair,
.text-highlight,
.fluid-width-video-wrapper,
figure:not(.uol-gallery__figure) {
margin-top: $spacing-5 !important;
@include media(">=uol-media-m") {
margin-top: $spacing-6 !important;
}
}
blockquote {
// calculated due to quote mark being off the top
margin-top: 40px;
@include media(">=uol-media-m") {
margin-top: 44px !important;
}
}
.uol-table-outer {
margin-top: $spacing-5 !important;
@include media(">=uol-media-xs") {
margin-top: $spacing-2 !important;
}
@include media(">=uol-media-m") {
margin-top: $spacing-4 !important;
}
}
}
// For vertical spacing on widget (news, events)
// and profile supplement, on article pattern
.uol-article .uol-rich-text p:last-child {
margin-bottom: 0;
}
// Fix for accordion
.uol-article .uol-accordion p:last-child {
margin-bottom: $spacing-4;
}
// Fix for accordion
.uol-article .uol-accordion p:last-child {
margin-bottom: $spacing-4;
}
.uol-article .uol-profile-supplement {
margin-top: 0;
margin-bottom: 0;
padding-top: $spacing-6;
max-width: auto;
@include media(">=uol-media-m") {
padding-top: $spacing-7;
}
@include media(">=uol-media-l") {
margin-right: calc(100% / 12 * 3);
margin-left: 0;
}
@include media(">=uol-media-xl") {
margin-right: calc(100% / 12 * 3 + 0.5rem);
}
.uol-profile-supplement__title {
margin-top: $spacing-4;
@include media(">=uol-media-l") {
margin-top: $spacing-5;
}
}
.uol-profile-supplement__text-container {
margin-bottom: 0;
}
}
.uol-side-nav-container--populated + .uol-article .uol-profile-supplement {
@include media(">=uol-media-l") {
margin-right: -0.5rem;
margin-left: calc(-100% / 12 * 2 + 3%);
}
@include media(">=uol-media-xl") {
margin-right: 0;
margin-left: calc(-100% / 12 * 2 + 4%);
}
}
.uol-article__widgets {
margin-left: 0;
margin-right: 0;
margin-top: $spacing-6;
@include media(">=uol-media-m") {
margin-top: $spacing-7;
}
@include media(">=uol-media-l") {
margin-right: calc(100% / 12 * 4);
margin-left: 0;
}
@include media(">=uol-media-xl") {
margin-right: calc(100% / 12 * 3 + 0.5rem);
margin-left: 0;
}
.uol-widget-container {
margin-bottom: 0;
}
.uol-widget {
margin-top: 0;
.uol-widget__title {
margin-top: $spacing-4;
@include media(">=uol-media-l") {
margin-top: $spacing-5;
}
}
.uol-cards,
.uol-widget__content {
margin-top: 0;
}
.uol-cards {
margin-bottom: 0;
.uol-cards__card {
&:last-of-type {
margin-bottom: 0;
}
@include media(">=uol-media-xl") {
margin-bottom: 0;
}
}
}
.uol-cards__card__image {
margin: 0;
}
@include media(">=uol-media-xl") {
.event-card-outer {
width: 33.333333333333333%;
}
}
}
}
// TO DO: refactor this file
.uol-article {
.uol-image-pair {
margin: $spacing-6 0;
@include media(">=uol-media-m") {
margin: $spacing-7 0;
}
.uol-image-pair__column {
margin: 0;
}
}
.uol-form__container {
margin-top: 2rem;
@include media(">=uol-media-m") {
margin-top: 3rem;
}
@include media("<uol-media-m") {
margin-bottom: 1.5rem;
}
.uol-form__input-container {
margin-bottom: 1rem;
@include media(">=uol-media-l") {
margin-bottom: 1.5rem;
}
}
// Typeahead overwrite when in article
.uol-typeahead__list {
margin: 19px 0;
padding-left: 0;
}
}
.uol-info-list-container {
margin: 0;
}
// -ve margins applied because spacing to gallery smaller than spacing to all other text elements
.uol-gallery-container {
margin: -0.5rem 0 -1rem;
@include media(">=uol-media-m") {
margin: -1rem 0;
}
}
// similarly for map in article
.uol-iframe {
margin-top: -0.5rem;
@include media(">=uol-media-m") {
margin-top: 0;
}
}
.uol-page-nav {
@include media(">=uol-media-m") {
margin-top: 2.75rem; // 44px, gap is 48px, map has 4px gap at bottom
}
@include media(">=uol-media-l") {
margin-bottom: 2.5rem; // 40px, gap is 48px, page title red line has 8px
}
}
}
{
"page_heading": {
"title": "Space research aims to boost Yorkshire economy",
"meta": [
{
"name": "Category",
"values": [
{
"label": "Environment",
"url": "/category/environment"
}
]
},
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-10-07 20:00"
}
]
}
]
},
"image_featured": {
"src": "/placeholders/tiles/space.jpg",
"alt": "Night sky filled with stars"
},
"article": {
"style_lead": true,
"content": " \n <p>The University is to help spearhead a national programme of technological revolution backed by the UK Space Agency.</p>\n\n \n \n <p>World-leading research in climate change, space and planetary science, navigation and transport, advanced computer techniques and instrumentation design is already carried out at Leeds Academics are working on global issues ranging from air quality, weather forecasting and sea level impact to flood alerts, earthquakes and polar glaciers.</p>\n\n <div aria-hidden=\"true\" class=\"uol-typography-pull-quote uol-typography-pull-quote--left\" >\n <p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub.</p>\n </div>\n \n <p>Now that expertise will underpin an ambitious programme which aims to bring together development and investment in new digital and space-related technology approaches.</p>\n \n \n \n <p>The project will see the University, Leeds City Region Local Enterprise Partnership (LEP) and other partners work together to further develop an emerging Local Space Hub across West Yorkshire, including Bradford, Calderdale, Kirklees, Leeds and Wakefield.</p>\n \n <p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub in these West Yorkshire regions over the next five to ten years.</p>\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 <p>World-leading research in climate change, space and planetary science, navigation and transport, advanced computer techniques and instrumentation design is already carried out at Leeds Academics are working on global issues ranging from air quality, weather forecasting and sea level impact to flood alerts, earthquakes and polar glaciers. Now that expertise will underpin an ambitious programme which aims to bring together development and investment in new digital and space-related technology approaches.</p>\n \n <blockquote>\n <p>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>Andrew Couldwell, Laying the Foundations</cite>\n </footer>\n </blockquote>\n \n <p>Dr Anna Hogg, University Academic Fellow and Earth observation expert at <a href=#>Leeds' School of Earth and Environment</a>, said space activity such as examining satellite data was essential for monitoring the Earth's climate.</p>\n\n <div aria-hidden=\"true\" class=\"uol-typography-pull-quote uol-typography-pull-quote--left\">\n <p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub</p>\n </div>\n \n <p>“This enables us to measure pollutants in the air we breathe, the health of forests and crops, and the speed of colossal glaciers on the Antarctic Ice Sheet that cause sea levels to rise,” she said.</p>\n \n <p>“This work will be of great benefit to the local, national, and international Space community for years to come.<p>“As a scientist, it's my job to discover something new about how the world works every day. I can't think of a more meaningful or exciting career to pursue.”</p>\n \n \n \n <p>The six-month programme, supported by £80,000 in funding from the UK Space Agency (UKSA), is one of seven projects announced today.</p>\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 \n <p>Science Minister Amanda Solloway said: “The UK's space sector has shown incredible resilience to the coronavirus pandemic and will continue to play a key role in our recovery – from creating high quality jobs to finding unique ways to support our NHS.</p>\n \n <div aria-hidden=\"true\" class=\"uol-typography-pull-quote uol-typography-pull-quote--left\">\n <p>It aims to identify existing industry strengths while unearthing challenges and knowledge gaps to develop a strong and sustainable space hub</p>\n </div>\n \n <p>“This funding will arm local leaders up and down the UK with the tools they need to put their local areas at the front of the commercial space race, while refuelling the tank of the UK economy and helping Britain realise its ambitions as a global space superpower.”</p>\n \n <p>In the last decade, space has transformed into one of the UK's fastest sectors. The UK space industry now employs close to 42,000 people nationally and generates income of nearly £15 billion every year.</p>\n \n <p>Professor Nick Plant, Deputy Vice-Chancellor: Research and Innovation at the University, said: “Challenge-led innovation sits at the heart of national and international research networks.</p>\n \n <p>“The UK has world-leading expertise in the space sector, and the University of Leeds is proud to be supporting entrepreneurship in the North, through the development of a regional space hub here in the Leeds City Region.”</p>\n\n <blockquote>\n <p>99.9 per cent of our objects to climate change have nothing to do with the science. They have everything to do solution aversion.</p>\n </blockquote>\n \n <p>If harnessed as part of a Local Space Hub, these businesses have the potential to set the Leeds City Region apart from other areas both in the UK and globally.</p>\n \n <figure>\n <img alt=\"International Space Station\" src=\"/placeholders/ph-news-15.jpg\">\n <figcaption>There is gravity on the International Space Station, but astronauts appear to be weightless because both the space station and the astronauts are in free fall. <a href=#>Picture credit: ESA</a></figcaption>\n </figure>\n \n <p>Among those supporting the Local Space Hub is Matthew Bray, CEO of SatSense - a University of Leeds spin-out company that uses satellite data to monitor ground movement across the UK.</p>\n \n <p>He said: “As a growing tech start-up with innovation at our core - access to talent, resources and customers are central to our needs.\n \n <p>“We're proud to call Leeds home, as there is no better place to meet our current needs and ambitious plans for the future.”</p>\n \n <p>Mandy Ridyard, board member of the Leeds City Region LEP and CEO of Bradford-based aerospace engineering company Produmax said: “This dynamic initiative aims to develop a world-leading regional space hub.</p>\n \n <p>“Accelerating economic growth through technology and innovation is a priority for the Leeds City Region LEP, and this exciting work will create new opportunities by harnessing the world-class expertise and talent already in our region.”</p>\n\n <table>\n <caption>Table of planetary statistics</caption>\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 \n <h2>Further information</h2>\n \n <p>Dr Anna Hogg is co-director of the <a href=#>NERC SENSE Centre for Doctoral Training</a> which is training 50 new PhD students to become Earth observation experts. Applications for SENSE PhD studentships are currently open.</p>\n \n <p>For further details, contact University of Leeds press officer <a href=mailto:example@example.com>i.rosser@leeds.ac.uk</a></p>"
},
"article_type": "news"
}