No notes defined.

{% if items.length %}
<div class="uol-results-items">
  {% for item in items %}
    <article class="uol-results-items__item {{ 'uol-results-items__item--has-image' if item.image.src }} {{ 'uol-results-items__item--featured' if item.featured }}">
      {% if item.featured %}
        <div class="uol-results-items__item__featured">Featured {{ item.type }}</div>
      {% endif %}
      <div class="uol-results-items__item__text-container">
        <h2 class="uol-results-items__item__title">
          <a href="{{ item.url }}" class="uol-results-items__item__link">{{ item.title | safe }}{% if item.featured %}<span class="hide-accessible">: Featured {{ item.type }}</span>{% endif %}</a>
        </h2>

        {% if item.highlight %}
          <strong class="uol-results-items__item__highlight">{{ item.highlight | safe }}</strong>
        {% endif %}

        {% if item.categories.length or item.date or item.duration or item.alevel_offer or item.ucas_code or item.custom_data %}
          <dl class="uol-results-items__item__meta">

            {% if item.duration %}
              <div class="uol-results-items__item__meta__group">
                <dt class="uol-results-items__item__meta__label">Duration</dt>
                <dd class="uol-results-items__item__meta__data">{{ item.duration | safe }}</dd>
              </div>
            {% endif %}
            {% if item.alevel_offer %}
              <div class="uol-results-items__item__meta__group">
                <dt class="uol-results-items__item__meta__label">Typical A-level offer</dt>
                <dd class="uol-results-items__item__meta__data">{{ item.alevel_offer | safe }}</dd>
              </div>
            {% endif %}
            {% if item.ucas_code %}
              <div class="uol-results-items__item__meta__group">
                <dt class="uol-results-items__item__meta__label">UCAS code</dt>
                <dd class="uol-results-items__item__meta__data">{{ item.ucas_code | safe }}</dd>
              </div>
            {% endif %}

            {% if item.date %}
              <div class="uol-results-items__item__meta__group">
                <dt class="uol-results-items__item__meta__label">{{'Event date' if item.type == 'event' else 'Published' }}</dt>
                <dd class="uol-results-items__item__meta__data">
                  {{ item.date }}
                </dd>
              </div>
            {% endif %}

            {% if item.categories.length %}
              <div class="uol-results-items__item__meta__group">
                <dt class="uol-results-items__item__meta__label">Categories</dt>
                {% for category in item.categories %}
                  <dd class="uol-results-items__item__meta__data">{{ category.title | safe }}</dd>
                {% endfor %}
              </div>
            {% endif %}

            {% if item.custom_data.length %}
              {% for custom_data in item.custom_data %}
                <div class="uol-results-items__item__meta__group">
                  <dt class="uol-results-items__item__meta__label">{{custom_data.title}}</dt>
                  <dd class="uol-results-items__item__meta__data">{{custom_data.data}}</dd>
                </div>
              {% endfor %}
            {% endif %}

          </dl>
        {% endif %}


        {% if item.text %}
          <p class="uol-results-items__item__summary">{{ item.text | safe }}</p>
        {% endif %}
      </div>

      {% if item.image.src %}
        <div class="uol-results-items__item__image-container">
          <img class="uol-results-items__item__img" src="{{ item.image.src }}" alt="{{ item.image.alt }}">
        </div>
      {% endif %}

    </article>
  {% endfor %}
</div>
{% endif %}
<div class="uol-results-items">

    <article class="uol-results-items__item uol-results-items__item--has-image uol-results-items__item--featured">

        <div class="uol-results-items__item__featured">Featured news</div>

        <div class="uol-results-items__item__text-container">
            <h2 class="uol-results-items__item__title">
                <a href="/result-link-2" class="uol-results-items__item__link">The Inaugural Edith Pechey Lecture<span class="hide-accessible">: Featured news</span></a>
            </h2>

            <dl class="uol-results-items__item__meta">

                <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Published</dt>
                    <dd class="uol-results-items__item__meta__data">
                        Sunday 9th May, 2021
                    </dd>
                </div>

                <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Categories</dt>

                    <dd class="uol-results-items__item__meta__data">University</dd>

                </div>

            </dl>

            <p class="uol-results-items__item__summary">The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.</p>

        </div>

        <div class="uol-results-items__item__image-container">
            <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
        </div>

    </article>

    <article class="uol-results-items__item  ">

        <div class="uol-results-items__item__text-container">
            <h2 class="uol-results-items__item__title">
                <a href="/result-link-1" class="uol-results-items__item__link">Ilkley Literature Festival event: &ldquo;Illuminating the Chaos and Obscurity&rdquo;: Ferrante and Dostoevsky in Dialogue</a>
            </h2>

            <dl class="uol-results-items__item__meta">

                <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Published</dt>
                    <dd class="uol-results-items__item__meta__data">
                        Saturday 8th May, 2021
                    </dd>
                </div>

                <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Categories</dt>

                    <dd class="uol-results-items__item__meta__data">University</dd>

                </div>

            </dl>

            <p class="uol-results-items__item__summary">Conversation between Dr Sarah Hudspith, a scholar of Dostoevsky, and Dr Olivia Santovetti, an expert on Ferrante, both members of the University of Leeds Centre for World Literature.</p>

        </div>

    </article>

    <article class="uol-results-items__item uol-results-items__item--has-image ">

        <div class="uol-results-items__item__text-container">
            <h2 class="uol-results-items__item__title">
                <a href="/result-link-2" class="uol-results-items__item__link">The Inaugural Edith Pechey Lecture</a>
            </h2>

            <dl class="uol-results-items__item__meta">

                <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Published</dt>
                    <dd class="uol-results-items__item__meta__data">
                        Friday 7th May, 2021
                    </dd>
                </div>

                <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Categories</dt>

                    <dd class="uol-results-items__item__meta__data">University</dd>

                </div>

            </dl>

            <p class="uol-results-items__item__summary">The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.</p>

        </div>

        <div class="uol-results-items__item__image-container">
            <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
        </div>

    </article>

</div>
  • Content:
    .uol-results-items {
      padding-top: $spacing-4;
      padding-bottom: $spacing-4;
    }
    
      .uol-results-items__item {
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: column;
        background: $color-grey--faded;
        margin-bottom: $spacing-4;
        padding: $spacing-4;
        border: 1px solid rgba($color-border--light, 0.6);
        transition: all 0.25s ease-in-out;
    
        @include media(">=uol-media-l") {
          margin-bottom: $spacing-5;
          padding: $spacing-5;
          flex-direction: row;
        }
    
        @include media(">=uol-media-xl") {
          margin-bottom: $spacing-6;
          padding: $spacing-6;
        }
    
        &:hover,
        &:focus-within {
          box-shadow:
            0 15px 25px rgba($color-black--dark, 0.15),
            0 5px 10px rgba($color-black--dark, 0.05);
        }
      }
    
        .uol-results-items__item--featured {
          margin-top: $spacing-5;
    
          &::before {
            content: "";
            position: absolute;
            top: -2px;
            right: -1px;
            left: -1px;
            height: 2px;
            background: $color-black;
          }
        }
    
        .uol-results-items__item__featured {
          position: absolute;
          bottom: 100%;
          left: -1px;
          padding: $spacing-2 $spacing-4;
          background: $color-black;
          color: $color-white;
    
          @include media(">=uol-media-l") {
            padding: $spacing-2 $spacing-5;
          }
    
          @include media(">=uol-media-xl") {
            padding: $spacing-2 $spacing-6;
          }
        }
    
        .uol-results-items__item__text-container {
          flex: 1 1 auto;
    
          .uol-results-items__item--has-image & {
    
            @include media(">=uol-media-l") {
              flex-basis: calc(65% - #{$spacing-5});
            }
    
            @include media(">=uol-media-xl") {
              flex-basis: calc(65% - #{$spacing-6});
            }
          }
        }
    
        .uol-results-items__item__title {
          margin: 0 0 $spacing-3;
        }
    
        .uol-results-items__item__link {
          @extend .uol-typography-heading-4;
    
          text-decoration: none;
    
          &::after {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          }
    
          &:hover,
          &:focus {
            text-decoration: underline;
          }
        }
    
        .uol-results-items__item__highlight {
          @extend .uol-typography-heading-6;
    
          margin-top: 0;
          margin-bottom: $spacing-4;
          display: block;
          color: $color-brand;
        }
    
        .uol-results-items__item__meta {
          @extend %text-size-caption;
    
          font-weight: $font-weight-medium--sans-serif;
          margin: 0 0 $spacing-2;
        }
    
          .uol-results-items__item__meta__group {
            margin-bottom: $spacing-2;
            line-height: 1.5rem;
          }
    
          .uol-results-items__item__meta__label {
            display: inline;
            font-weight: $font-weight-bold--sans-serif;
    
            &::after {
              content: ":";
            }
          }
    
          .uol-results-items__item__meta__data {
            margin: 0;
            display: inline;
    
            &::after {
              content: "";
              display: inline-block;
              position: relative;
              width: 1px;
              height: 0.8em;
              background-color: $color-brand;
              margin-left: 0.3em;
              margin-right: 0.15em;
              top: 0.1em;
            }
    
            &:last-of-type {
              &::after {
                content: none;
              }
            }
          }
    
        .uol-results-items__item__image-container {
          order: -1;
          position: relative;
          padding-bottom: 50%;
          height: 0;
          overflow: hidden;
          margin: -#{$spacing-4} -#{$spacing-4} $spacing-4 -#{$spacing-4};
          flex: 1 1 auto;
    
          @include media(">=uol-media-l") {
            width: unset;
            flex-basis: 35%;
            padding-bottom: 18%;
            margin: 0 $spacing-5 0 0;
          }
    
          @include media(">=uol-media-xl") {
            margin: 0 $spacing-6 0 0;
          }
        }
    
        .uol-results-items__item__img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto;
        }
    
        .uol-results-items__item__summary {
          @extend .uol-typography-paragraph-small;
        }
    
  • URL: /components/raw/uol-results-items/_results-items.scss
  • Filesystem Path: src/library/02-components/results-items/_results-items.scss
  • Size: 4.1 KB
{
  "items": [
    {
      "type": "news",
      "featured": true,
      "url": "/result-link-2",
      "title": "The Inaugural Edith Pechey Lecture",
      "date": "Sunday 9th May, 2021",
      "categories": [
        {
          "title": "University"
        }
      ],
      "text": "The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      }
    },
    {
      "type": "news",
      "url": "/result-link-1",
      "date": "Saturday 8th May, 2021",
      "categories": [
        {
          "title": "University"
        }
      ],
      "title": "Ilkley Literature Festival event: &ldquo;Illuminating the Chaos and Obscurity&rdquo;: Ferrante and Dostoevsky in Dialogue",
      "text": "Conversation between Dr Sarah Hudspith, a scholar of Dostoevsky, and Dr Olivia Santovetti, an expert on Ferrante, both members of the University of Leeds Centre for World Literature."
    },
    {
      "type": "news",
      "url": "/result-link-2",
      "title": "The Inaugural Edith Pechey Lecture",
      "date": "Friday 7th May, 2021",
      "categories": [
        {
          "title": "University"
        }
      ],
      "text": "The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      }
    }
  ]
}