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--profile">
<div class="uol-article__head">
<div class="uol-article__head__image-container">
<div class="uol-profile-image">
<div class="uol-profile-image__img" role="img" style="background-image: url('../../placeholders/ph-profile-staff-03.jpg');" aria-label="Portrait of Lottie Quinn"></div>
</div>
</div>
<header class="page-heading">
<h1 class="page-heading__title">
<span class="page-heading__title__main">Lottie Quinn</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">
Associate Professor in Design Systems
</dd>
</div>
</dl>
</header>
</div>
<div class="uol-article__content">
<div class="uol-info-list-container">
<dl class="uol-info-list ">
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Area of expertise</dt>
<dd class="uol-info-list__data ">
User Experience
</dd>
<dd class="uol-info-list__data ">
Interaction Design
</dd>
<dd class="uol-info-list__data ">
Graphic Design
</dd>
<dd class="uol-info-list__data ">
Web Development
</dd>
<dd class="uol-info-list__data ">
Art Direction
</dd>
<dd class="uol-info-list__data ">
Web Design
</dd>
<dd class="uol-info-list__data ">
User Experience Design
</dd>
<dd class="uol-info-list__data ">
Information Architecture
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Email</dt>
<dd class="uol-info-list__data uol-info-list__data--email">
<a href="mailto:L.Quinn@leeds.ac.uk">L.Quinn@leeds.ac.uk</a>
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Location</dt>
<dd class="uol-info-list__data ">
Room 1.2 Parkinson Tower
</dd>
</div>
<div class="uol-info-list__group">
<dt class="uol-info-list__term ">Website</dt>
<dd class="uol-info-list__data uol-info-list__data--url">
<a href="https://twitter.com/samantha-pugh">Twitter</a>
</dd>
<dd class="uol-info-list__data uol-info-list__data--url">
<a href="https://www.linkedin.com/in/samantha-pugh/">LinkedIn</a>
</dd>
<dd class="uol-info-list__data uol-info-list__data--url">
<a href="https://www.researchgate.net/profile/samantha-pugh">Researchgate</a>
</dd>
</div>
</dl>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Profile</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<p>Lottie Quinn is a digital design professional and academic. She is an Associate Lecturer teaching digital communications and user experience design in the Faculty of Design System at the University of Leeds.</p>
<p>She's an internationally awarding-winning designer and creative director and works with businesses, charities, companies, and NGOs all over the world. Her clients include prestigious organisations including BBC, Disney, Nike, Greenpeace, Mind, Cancer Research, WWF and the National Trust.</p>
<p>Her award-winning design practice informs all of her research and teaching. Lottie's interests and fortitude lies at the intersection of business, design, education and new technology, which influences her teaching, research, writing and design practice, she strongly believes in collaboration.</p>
<p>Teaching extensively through the medium of collaborative projects with external partners, Lottie has initiated, directed and supervised teaching on a series of high-profile live projects. Working with Greenpeace, Mind, The Joseph Rowntree Foundation, The Canal Trust, The Trussell Trust and ReThink with international digital agencies such as Tod, UsThree, Working Design Club and Pippin Design introducing her students to new issues and contexts that enhance their skills.</p>
<p>She has an outstanding track record for developing context-based learning and working in partnership with students in the Faculty of Design System. Lottie is also recognised for inspiring and mentoring colleagues to shape teaching through collaboration, analysis and development.</p>
<p>She has secured over £900k in teaching development grants from the National HE Design System Programme (HE DSP) and the Royal Society of Service Design (RSD) leading to the institutional enhancement of design and the recognition of the importance and benefit of a Design System at Leeds. Lottie's teaching philosophy focuses on student personal and professional development. It emphasises the skills and attributes needed for a successful career and students' ability to verbalise those qualities. To this end, she has pioneered the use of reflective writing in service design at Leeds. Lottie is sector-leading in embedding collaboration and entrepreneurship within the Design System curriculum.</p>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Responsibilities</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<ul>
<li>Director of Design System</li>
<li>Leader - Design System Group</li>
<li>Programme Manager of Design Services</li>
</ul>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Research interests</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<p>My research interests lie in how design systems can streamline the design and development process — how they effectively decrease the amount of time it takes to design, build, and ship new websites, products, and features. My main focus is examining how a successful design system enables teams to rapidly prototype and experiment with ideas in high fidelity — and how this ultimately saves business time and money.</p>
<p>My other interests lie in researching how design systems help businesses design and build on-brand, quality digital products. By investigating how a design systems can mitigate the problems that many large scale business and organisations have with distributed teams creating a variety of styles and slightly different approaches to solving the same problem and how designs can quickly become inconsistent. How design systems enable teams to follow guidelines and stay consistent and ensure that interfaces are more predictable and accessible, which fosters trust in users and helps with conversion and retention.</p>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Qualifications</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<ul>
<li>MA Design Systems</li>
<li>PCAPL Teaching & Learning</li>
<li>BA (Hons) Service Design</li>
<li>Fellow (FHEA) Higher Education Academy (HEA)</li>
</ul>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Professional memberships</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<ul>
<li>Fellow of the Higher Education Design Academy</li>
<li>Member of the Royal Society of Design</li>
<li>Member of the Association of National Teaching Fellows</li>
</ul>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Student education</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<ul>
<li>Director of Student Education (Design Systems)</li>
<li>Programme Manager: MA Design Systems</li>
<li>Module Manager: Service Design</li>
<li>Module Manager: Design Systems Industrial Project</li>
<li>Module contributor: Design efficiency and Speed; Design consistency and user experience; Design and development speaking the same language</li>
</ul>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Current postgraduate researchers</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<p><a href="/profile-harvey-sutton">Harvey Sutton</a></p>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Postgraduate research opportunities</h2>
<div class="uol-article-section__content">
<div class="uol-spacing uol-rich-text ">
<p>We welcome enquiries from motivated and qualified applicants from all around the world who are interested in PhD study. Our research opportunities allow you to search for projects and scholarships.</p>
</div>
</div>
</div>
<div class="uol-article-section uol-rich-text">
<h2 class="uol-article-section__title">Publications</h2>
<div class="uol-article-section__content">
<div class="uol-accordion uol-rich-text">
<h3 class="uol-accordion__title">
My five most recent selected publications
</h3>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
<div class="uol-rich-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
<p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
<p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
<p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
<p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
</div>
</div>
</div>
</div>
<div class="uol-accordion uol-rich-text">
<h3 class="uol-accordion__title">
Journal articles
</h3>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
<div class="uol-rich-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
<p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
<p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
<p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
<p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
</div>
</div>
</div>
</div>
<div class="uol-accordion uol-rich-text">
<h3 class="uol-accordion__title">
Conference papers
</h3>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
<div class="uol-rich-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
<p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
<p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
<p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
<p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
</div>
</div>
</div>
</div>
<div class="uol-accordion uol-rich-text">
<h3 class="uol-accordion__title">
Chapters
</h3>
<div class="uol-accordion__content">
<div class="uol-accordion__content-inner">
<div class="uol-rich-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>
<p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>
<p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>
<p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>
<p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>
</div>
</div>
</div>
</div>
</div>
</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, .uol-page-container {
.uol-side-nav-container--populated + .uol-article, .uol-side-nav-container--populated + .uol-page {
@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, .uol-page {
:not(.uol-article--profile) {
.uol-article__head, .uol-page__head {
@include media(">=uol-media-l") {
margin-right: calc(100% / 12* 4) !important;
}
@include media(">=uol-media-xl") {
margin-right: calc(100% / 12 * 5) !important;
}
}
}
// 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,
.uol-page__head,
.uol-page__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;
}
}
.uol-rich-text--with-lead {
// Add accent to lead paragraph
> p:first-of-type {
// margin-bottom: $spacing-4;
@include media(">=uol-media-m") {
position: relative;
// 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;
}
}
}
.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;
}
}
.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;
}
@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);
}
}
.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;
}
}
.page-heading__meta__group {
margin-bottom: $spacing-6;
}
.uol-article__head {
flex-direction: column;
.uol-article__no-profile-image {
width: 100%;
@include media(">=uol-media-xl") {
margin-left: calc((100% + #{$col-gutter-xl} + 8px) / 12 * 4);
}
}
@include media(">=uol-media-s") {
display: flex;
flex-direction: row;
align-items: center;
}
.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: 2rem;
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;
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 {
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);
}
&:has(.uol-article__no-profile-image) {
@include media(">=uol-media-s") {
margin-left: calc((100% + #{$col-gutter-s} + 8px) / 12 * 1);
}
@include media(">=uol-media-l") {
margin-left: calc((100% + #{$col-gutter-l} + 8px) / 12 * 2);
}
@include media(">=uol-media-xl") {
margin-left: 0;
}
}
}
.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) + {
.uol-in-text-facts__container {
margin-top: $spacing-5 !important;
@include media(">=uol-media-m") {
margin-top: $spacing-6 !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;
}
// Fix for margin on accordion within article pages
.uol-article .uol-accordion__content .uol-rich-text {
margin-right: 0;
}
.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
}
}
}
// Set max width for default featured image
.uol-article {
.uol-featured-image {
max-width: 49rem;
}
}
// Bigger featured image for news and event variants
.uol-article--news,
.uol-article--event {
.uol-featured-image {
max-width: inherit;
margin-right: 0;
}
}
// set max-width to contain ckeditor elements (without side nav)
:not(.uol-side-nav-container--populated) + .uol-article {
.uol-article__head,
.uol-article__content {
@include media(">=uol-media-l") {
// max-width: 49rem;
}
}
}
{
"page_heading": {
"title": "Lottie Quinn",
"meta": [
{
"name": "Position",
"values": [
{
"label": "Associate Professor in Design Systems"
}
]
}
]
},
"image_featured": null,
"article": null,
"article_type": "profile",
"profile_image": {
"src": "/placeholders/ph-profile-staff-03.jpg",
"alt": "Lottie Quinn"
},
"info_list": [
{
"term": "Area of expertise",
"data": [
{
"label": "User Experience"
},
{
"label": "Interaction Design"
},
{
"label": "Graphic Design"
},
{
"label": "Web Development"
},
{
"label": "Art Direction"
},
{
"label": "Web Design"
},
{
"label": "User Experience Design"
},
{
"label": "Information Architecture"
}
]
},
{
"term": "Email",
"data": [
{
"type": "email",
"label": "L.Quinn@leeds.ac.uk"
}
]
},
{
"term": "Location",
"data": [
{
"label": "Room 1.2 Parkinson Tower"
}
]
},
{
"term": "Website",
"data": [
{
"type": "url",
"label": "Twitter",
"url": "https://twitter.com/samantha-pugh"
},
{
"type": "url",
"label": "LinkedIn",
"url": "https://www.linkedin.com/in/samantha-pugh/"
},
{
"type": "url",
"label": "Researchgate",
"url": "https://www.researchgate.net/profile/samantha-pugh"
}
]
}
],
"sections": [
{
"title": "Profile",
"type": "uol-cms-container",
"content": {
"content": "\n <p>Lottie Quinn is a digital design professional and academic. She is an Associate Lecturer teaching digital communications and user experience design in the Faculty of Design System at the University of Leeds.</p>\n \n <p>She's an internationally awarding-winning designer and creative director and works with businesses, charities, companies, and NGOs all over the world. Her clients include prestigious organisations including BBC, Disney, Nike, Greenpeace, Mind, Cancer Research, WWF and the National Trust.</p>\n \n <p>Her award-winning design practice informs all of her research and teaching. Lottie's interests and fortitude lies at the intersection of business, design, education and new technology, which influences her teaching, research, writing and design practice, she strongly believes in collaboration.</p>\n \n <p>Teaching extensively through the medium of collaborative projects with external partners, Lottie has initiated, directed and supervised teaching on a series of high-profile live projects. Working with Greenpeace, Mind, The Joseph Rowntree Foundation, The Canal Trust, The Trussell Trust and ReThink with international digital agencies such as Tod, UsThree, Working Design Club and Pippin Design introducing her students to new issues and contexts that enhance their skills.</p>\n \n <p>She has an outstanding track record for developing context-based learning and working in partnership with students in the Faculty of Design System. Lottie is also recognised for inspiring and mentoring colleagues to shape teaching through collaboration, analysis and development.</p>\n \n <p>She has secured over £900k in teaching development grants from the National HE Design System Programme (HE DSP) and the Royal Society of Service Design (RSD) leading to the institutional enhancement of design and the recognition of the importance and benefit of a Design System at Leeds. Lottie's teaching philosophy focuses on student personal and professional development. It emphasises the skills and attributes needed for a successful career and students' ability to verbalise those qualities. To this end, she has pioneered the use of reflective writing in service design at Leeds. Lottie is sector-leading in embedding collaboration and entrepreneurship within the Design System curriculum.</p>"
}
},
{
"title": "Responsibilities",
"type": "uol-cms-container",
"content": {
"content": "<ul><li>Director of Design System</li><li>Leader - Design System Group</li><li>Programme Manager of Design Services</li></ul>"
}
},
{
"title": "Research interests",
"type": "uol-cms-container",
"content": {
"content": "\n <p>My research interests lie in how design systems can streamline the design and development process — how they effectively decrease the amount of time it takes to design, build, and ship new websites, products, and features. My main focus is examining how a successful design system enables teams to rapidly prototype and experiment with ideas in high fidelity — and how this ultimately saves business time and money.</p>\n \n <p>My other interests lie in researching how design systems help businesses design and build on-brand, quality digital products. By investigating how a design systems can mitigate the problems that many large scale business and organisations have with distributed teams creating a variety of styles and slightly different approaches to solving the same problem and how designs can quickly become inconsistent. How design systems enable teams to follow guidelines and stay consistent and ensure that interfaces are more predictable and accessible, which fosters trust in users and helps with conversion and retention.</p>"
}
},
{
"title": "Qualifications",
"type": "uol-cms-container",
"content": {
"content": "<ul><li>MA Design Systems</li><li>PCAPL Teaching & Learning</li><li>BA (Hons) Service Design</li><li>Fellow (FHEA) Higher Education Academy (HEA)</li></ul>"
}
},
{
"title": "Professional memberships",
"type": "uol-cms-container",
"content": {
"content": "<ul><li>Fellow of the Higher Education Design Academy</li><li>Member of the Royal Society of Design</li><li>Member of the Association of National Teaching Fellows</li></ul>"
}
},
{
"title": "Student education",
"type": "uol-cms-container",
"content": {
"content": "<ul><li>Director of Student Education (Design Systems)</li><li>Programme Manager: MA Design Systems</li><li>Module Manager: Service Design</li><li>Module Manager: Design Systems Industrial Project</li><li>Module contributor: Design efficiency and Speed; Design consistency and user experience; Design and development speaking the same language</li></ul>"
}
},
{
"title": "Current postgraduate researchers",
"type": "uol-cms-container",
"content": {
"content": "<p><a href=\"/profile-harvey-sutton\">Harvey Sutton</a></p>"
}
},
{
"title": "Postgraduate research opportunities",
"type": "uol-cms-container",
"content": {
"content": "<p>We welcome enquiries from motivated and qualified applicants from all around the world who are interested in PhD study. Our research opportunities allow you to search for projects and scholarships.</p>"
}
},
{
"title": "Publications",
"type": "uol-accordion",
"content": {
"accordions": [
{
"heading_tag": "h3",
"title": "My five most recent selected publications",
"content": "\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>\n \n <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>\n \n <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>\n \n <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>\n \n <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
},
{
"heading_tag": "h3",
"title": "Journal articles",
"content": "\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>\n \n <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>\n \n <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>\n \n <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>\n \n <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
},
{
"heading_tag": "h3",
"title": "Conference papers",
"content": "\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>\n \n <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>\n \n <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>\n \n <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>\n \n <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
},
{
"heading_tag": "h3",
"title": "Chapters",
"content": "\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam reiciendis fuga aliquid.</p>\n \n <p>Facilis tempore omnis doloremque dicta labore nisi voluptas iusto ipsum magnam aliquam.</p>\n \n <p>Magni ipsum possimus nam neque ut in vel fuga deleniti dolor temporibus.</p>\n \n <p>Aliquam neque excepturi, id enim velit delectus aperiam nemo ducimus obcaecati explicabo.</p>\n \n <p>Ea est sed quod, delectus quo quis sit nobis ratione ab aperiam!</p>"
}
]
}
}
]
}