University of Leeds Design System v1.0.13

Article: Profile Two

A general article template to support a variety of uses including:

  • Default
  • News
  • Event
  • Profile
  • Person Insight
  • Blog
  • Buildings and rooms page

The visual layouts for each are article type are selected using the article_type option.

Options

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.

Default Article content

Must have

At least one paragraph.

Could include any of the following:

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

Should not display the following patterns:

Related news suppliment Multi page document (previous /next) Marketing profile suppliment Pullquotes

Article: News

Article: News: Page heading component

(See page heading component and context tab for config structure)

  • Event title (H1)
  • Link to event category
  • Date

Article: News: Featured image component (optional)

Article: News: Article content

Must have at least one paragraph.

Other information as per the default options above

Article: Event

Article: Event: Page heading component

(See page heading component and context tab for config structure)

  • Event title (H1)
  • Link to event category

Article: Event: Info list component

  • First item to show Event date in format Thursday 3 December 2020

Further event information eg:

  • Time: 6pm-7pm
  • Location: Online via Zoom Webinar
  • Type: Lectures and seminars
  • Audience: Open to general public

Article: Event: Featured image component (optional)

Article: Event: Article content

Must have at least one paragraph.

Other information as per the default options above

Article: Person Insight

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.

Article: form-map

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-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&apos;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&apos;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&apos;s teaching philosophy focuses on student personal and professional development. It emphasises the skills and attributes needed for a successful career and students&apos; 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-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-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-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-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-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-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-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>
  • Content: 
    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
  • URL: /components/raw/uol-article/TODO.md
  • Filesystem Path: src/library/03-patterns/article/TODO.md
  • Size: 175 Bytes
  • Content: 
    $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-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;
    }
  }

  .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 {
    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;
}

.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;
  }
}
  • URL: /components/raw/uol-article/_article.scss
  • Filesystem Path: src/library/03-patterns/article/_article.scss
  • Size: 16.6 KB 
{
  "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&apos;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&apos;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&apos;s teaching philosophy focuses on student personal and professional development. It emphasises the skills and attributes needed for a successful career and students&apos; 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>"
          }
        ]
      }
    }
  ]
}