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--person-insight">
<div class="uol-article__head">
<div class="uol-article__head__heading-text">
<header class="page-heading">
<h1 class="page-heading__title">
<span class="page-heading__title__main">Luis Toussaint</span>
</h1>
<dl class="page-heading__meta">
<div class="page-heading__meta__group">
<dt class="page-heading__meta__term">Position</dt>
<dd class="page-heading__meta__data">
Undergraduate
</dd>
</div>
</dl>
</header>
<div class="uol-info-list-container">
<dl class="uol-info-list ">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Course</dt>
<dd class="uol-info-list__data ">
BA Design Systems
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Year of graduation</dt>
<dd class="uol-info-list__data ">
2021
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Nationality</dt>
<dd class="uol-info-list__data ">
French
</dd>
</div>
</dl>
</div>
</div>
<div class="uol-profile-image">
<div class="uol-profile-image__img" role="img" style="background-image: url('../../placeholders/ph-profile-student-12.jpg');" aria-label="Portrait of Lottie Quinn"></div>
</div>
</div>
<div class="uol-article__content">
<div class="uol-rich-text ">
<h2>Why did you choose to study your degree at the University of Leeds?</h2>
<p>Leeds is the place to be. I had heard from friends who had studied here on a year abroad that Leeds was a wicked student city with a vibrant lifestyle and after a visit on one the open days when I saw first-hand campus life and looked around the Faculty of Design Systems I just wanted to be part of it. Coming from a smaller town in rural France I wanted to experience university in a European city and Leeds is perfect, everything is centralised with great student living areas and there are so much freedom and accessibility. The University of Leeds is one of the leading Design Systems institutions in the world and I knew I had to be here in order to push the best I could and set myself up for a successful career in the design industry.</p>
<h2>What made you select your course?</h2>
<p>Leeds is the place to be. I had heard from friends who had studied here on a year abroad that Leeds was a wicked student city with a vibrant lifestyle and after a visit on one the open days when I saw first-hand campus life and looked around the Faculty of Design Systems I just wanted to be part of it. Coming from a smaller town in rural France I wanted to experience university in a European city and Leeds is perfect, everything is centralised with great student living areas and there are so much freedom and accessibility. The University of Leeds is one of the leading Design Systems institutions in the world and I knew I had to be here in order to push the best I could and set myself up for a successful career in the design industry.</p>
<blockquote>
<p>All I knew was that I loved and wanted to design, create and push boundaries which as an emerging area this course ticked all the boxes.</p>
</blockquote>
<section class="uol-gallery-container" aria-label="Gallery of 4 items">
<div class="uol-gallery uol-gallery--count-4">
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">“Dual Form” by Barbara Hepworth</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29940.jpeg" alt="Dual Form sculpture by Barbara Hepworth with people relaxing on grass in background" data-src-high-quality="/placeholders/campus/full/29940.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">“Dual Form” by Barbara Hepworth</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Edward Boyle Library</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/28573.jpeg" alt="Steps outside Edward Boyle Library" data-src-high-quality="/placeholders/campus/full/28573.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, <a href='/some-text-link'>minus ea quod</a> quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Victoria Quarter Arcade, Leeds</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29936.jpeg" alt="Interior of Victoria Quarter Arcade" data-src-high-quality="/placeholders/campus/full/29936.jpeg">
</div>
<figcaption class="uol-gallery__image-caption">Victoria Quarter</figcaption>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, <a href='/some-text-link'>consequuntur recusandae? Ipsam</a>, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
<div class="uol-gallery__item uol-gallery__item--image">
<h2 class="uol-gallery__item__title">Reger Stevens building</h2>
<figure class="uol-gallery__figure">
<div class="uol-gallery__image-container">
<img src="/placeholders/campus/medium/29921.jpeg" alt="Pond outside Roger Stevens building" data-src-high-quality="/placeholders/campus/full/29921.jpeg">
</div>
</figure>
<div class="uol-gallery__item__content">
<p>Lorem ipsum dolor sit amet consectetur <a href='/some-text-link'>adipisicing elit</a>. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>
<p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>
<p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>
<p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>
</div>
</div>
</div>
</section>
<h2>What do you specialise in? What exciting things are you working on at the moment?</h2>
<p>I am now tailoring my training towards design systems, service design and user experience as this is a field I am keen to explore and probably go into in the future. I do however have a high interest in front end development and recently have been elected as master front-end developer wizard managing the University's design system website next year which I am super psyched about.</p>
<p>I am also part of a creative family of 3 called ‘The 3 Racoons’ who I met whilst here at Leeds. We specialise in design and front end development. Our work includes working with brands such as Lucy and YAK, Mutts and hounds, Sonny banks mills, Ward Brewarys and a range of other independent artists and brands that we're all enthusiastic about. The aim is to expand our client base and build on our portfolios whilst still studying, I am super excited for what the future holds.</p>
<h2>How does the University develop your practice?</h2>
<p>I have learnt more in the last four months than learnt in a year on my foundation course, more than I could have possibly believed, and I intend to continue this way. I am constantly pushed to question and advance my designs to help develop and push boundaries in my decision-making and critical analysis. Daily critiques and peer feedback helps me and my work grow, taking it in new directions I never contemplated and knew about. I think the most important thing for me is being in a creative environment where I am surrounded by like-minded people who want to exceed themselves and join a community where striving for perfection is the purpose.</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": "Luis Toussaint",
"meta": [
{
"name": "Position",
"values": [
{
"label": "Undergraduate"
}
]
}
]
},
"image_featured": null,
"article": {
"style_lead": false,
"content": "\n <h2>Why did you choose to study your degree at the University of Leeds?</h2>\n \n <p>Leeds is the place to be. I had heard from friends who had studied here on a year abroad that Leeds was a wicked student city with a vibrant lifestyle and after a visit on one the open days when I saw first-hand campus life and looked around the Faculty of Design Systems I just wanted to be part of it. Coming from a smaller town in rural France I wanted to experience university in a European city and Leeds is perfect, everything is centralised with great student living areas and there are so much freedom and accessibility. The University of Leeds is one of the leading Design Systems institutions in the world and I knew I had to be here in order to push the best I could and set myself up for a successful career in the design industry.</p>\n \n <h2>What made you select your course?</h2>\n \n <p>Leeds is the place to be. I had heard from friends who had studied here on a year abroad that Leeds was a wicked student city with a vibrant lifestyle and after a visit on one the open days when I saw first-hand campus life and looked around the Faculty of Design Systems I just wanted to be part of it. Coming from a smaller town in rural France I wanted to experience university in a European city and Leeds is perfect, everything is centralised with great student living areas and there are so much freedom and accessibility. The University of Leeds is one of the leading Design Systems institutions in the world and I knew I had to be here in order to push the best I could and set myself up for a successful career in the design industry.</p>\n \n <blockquote>\n <p>All I knew was that I loved and wanted to design, create and push boundaries which as an emerging area this course ticked all the boxes.</p>\n </blockquote>\n\n <section class=\"uol-gallery-container\" aria-label=\"Gallery of 4 items\">\n <div class=\"uol-gallery uol-gallery--count-4\">\n\n <div class=\"uol-gallery__item uol-gallery__item--image\">\n <h2 class=\"uol-gallery__item__title\">“Dual Form” by Barbara Hepworth</h2>\n <figure class=\"uol-gallery__figure\">\n <div class=\"uol-gallery__image-container\">\n <img src=\"/placeholders/campus/medium/29940.jpeg\" alt=\"Dual Form sculpture by Barbara Hepworth with people relaxing on grass in background\" data-src-high-quality=\"/placeholders/campus/full/29940.jpeg\">\n </div>\n <figcaption class=\"uol-gallery__image-caption\">“Dual Form” by Barbara Hepworth</figcaption>\n </figure>\n <div class=\"uol-gallery__item__content\">\n <p>Lorem ipsum <a href='/some-text-link'>dolor sit amet consectetur</a> adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>\n <p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>\n <p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>\n <p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>\n </div>\n </div>\n\n <div class=\"uol-gallery__item uol-gallery__item--image\">\n <h2 class=\"uol-gallery__item__title\">Edward Boyle Library</h2>\n <figure class=\"uol-gallery__figure\">\n <div class=\"uol-gallery__image-container\">\n <img src=\"/placeholders/campus/medium/28573.jpeg\" alt=\"Steps outside Edward Boyle Library\" data-src-high-quality=\"/placeholders/campus/full/28573.jpeg\">\n </div>\n </figure>\n <div class=\"uol-gallery__item__content\">\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>\n <p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>\n <p>Eos reprehenderit suscipit, at eveniet, <a href='/some-text-link'>minus ea quod</a> quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>\n <p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>\n </div>\n </div>\n\n <div class=\"uol-gallery__item uol-gallery__item--image\">\n <h2 class=\"uol-gallery__item__title\">Victoria Quarter Arcade, Leeds</h2>\n <figure class=\"uol-gallery__figure\">\n <div class=\"uol-gallery__image-container\">\n <img src=\"/placeholders/campus/medium/29936.jpeg\" alt=\"Interior of Victoria Quarter Arcade\" data-src-high-quality=\"/placeholders/campus/full/29936.jpeg\">\n </div>\n <figcaption class=\"uol-gallery__image-caption\">Victoria Quarter</figcaption>\n </figure>\n <div class=\"uol-gallery__item__content\">\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, <a href='/some-text-link'>consequuntur recusandae? Ipsam</a>, asperiores.</p>\n <p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>\n <p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>\n <p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>\n </div>\n </div>\n\n <div class=\"uol-gallery__item uol-gallery__item--image\">\n <h2 class=\"uol-gallery__item__title\">Reger Stevens building</h2>\n <figure class=\"uol-gallery__figure\">\n <div class=\"uol-gallery__image-container\">\n <img src=\"/placeholders/campus/medium/29921.jpeg\" alt=\"Pond outside Roger Stevens building\" data-src-high-quality=\"/placeholders/campus/full/29921.jpeg\">\n </div>\n </figure>\n <div class=\"uol-gallery__item__content\">\n <p>Lorem ipsum dolor sit amet consectetur <a href='/some-text-link'>adipisicing elit</a>. Corrupti, quasi nostrum blanditiis hic totam a id architecto molestias, sunt vitae iste consectetur cupiditate incidunt autem illo, consequuntur recusandae? Ipsam, asperiores.</p>\n <p>Expedita saepe illo vero sit et! Eveniet, deserunt. Nihil omnis fugit ut veniam ullam, non maiores, consequatur amet enim dolore totam, laborum accusantium voluptatum iure est ab aspernatur reiciendis explicabo.</p>\n <p>Eos reprehenderit suscipit, at eveniet, minus ea quod quis provident, nisi fugit maiores molestias culpa. Rerum rem pariatur quo mollitia autem omnis eum officiis, natus beatae eos saepe culpa earum!</p>\n <p>Eum ut tempore delectus quos unde tenetur neque perspiciatis. Dicta sunt rem dolore, in ab impedit assumenda, quaerat neque quos veritatis consequatur accusantium dignissimos eius natus iusto nostrum eos maxime.</p>\n </div> \n </div>\n </div>\n </section>\n \n <h2>What do you specialise in? What exciting things are you working on at the moment?</h2>\n \n <p>I am now tailoring my training towards design systems, service design and user experience as this is a field I am keen to explore and probably go into in the future. I do however have a high interest in front end development and recently have been elected as master front-end developer wizard managing the University's design system website next year which I am super psyched about.</p>\n \n <p>I am also part of a creative family of 3 called ‘The 3 Racoons’ who I met whilst here at Leeds. We specialise in design and front end development. Our work includes working with brands such as Lucy and YAK, Mutts and hounds, Sonny banks mills, Ward Brewarys and a range of other independent artists and brands that we're all enthusiastic about. The aim is to expand our client base and build on our portfolios whilst still studying, I am super excited for what the future holds.</p>\n \n <h2>How does the University develop your practice?</h2>\n \n <p>I have learnt more in the last four months than learnt in a year on my foundation course, more than I could have possibly believed, and I intend to continue this way. I am constantly pushed to question and advance my designs to help develop and push boundaries in my decision-making and critical analysis. Daily critiques and peer feedback helps me and my work grow, taking it in new directions I never contemplated and knew about. I think the most important thing for me is being in a creative environment where I am surrounded by like-minded people who want to exceed themselves and join a community where striving for perfection is the purpose.</p>"
},
"article_type": "person-insight",
"profile_image": {
"src": "/placeholders/ph-profile-student-12.jpg",
"alt": "Lottie Quinn"
},
"info_list": [
{
"term": "Course",
"data": [
{
"label": "BA Design Systems"
}
]
},
{
"term": "Year of graduation",
"data": [
{
"label": "2021"
}
]
},
{
"term": "Nationality",
"data": [
{
"label": "French"
}
]
}
]
}