University of Leeds Design System v1.0.14.2

Widget

No notes defined.

{% set widgetWideContent = cards.wide_container %}

<div class="uol-widget-container">
  <div class="uol-widget{{ ' uol-widget--' + widget_type if widget_type }}{{ ' uol-widget--wide' if widgetWideContent }}">

    {% if widget_title or widget_lead or widget_link %}
      <div class="uol-widget__left-col">
    {% endif %}

        {% if widget_title or widget_lead or widget_link %}
          <div class="uol-widget__head">
            {% if widget_title %}
              <h2 class="uol-widget__title">{{ widget_title }}</h2>
            {% endif %}

            {% if widget_lead %}
              <div class="uol-widget__lead">{{ widget_lead | safe }}</div>
            {% endif %}

            {% if widget_link %}
              <a class="uol-widget__link" href="{{ widget_link.url }}">{{ widget_link.text }}</a>
            {% endif %}
          </div>
        {% endif %}

        {% if widget_arrow_links.length > 0 %}
          <ul class="uol-widget__arrow-links">
            {% for link in widget_arrow_links %}
              <li class="uol-widget__arrow-links-item"><a href="{{link.url}}" class="uol-widget__arrow-link uol-arrow-link">{{link.title}}</a></li>
            {% endfor %}
          </ul>
        {% endif %}

    {% if widget_title or widget_lead or widget_link %}
      </div>
    {% endif %}

    <div class="uol-widget__content">
      {% block widget_content %}
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis ratione sequi aliquam eius animi. Ad quos culpa, earum porro sit repellendus architecto, praesentium quaerat explicabo molestias sapiente id! Cum, architecto.</p>
        <p>Quae tempore recusandae esse ex unde, illo neque repellendus accusamus voluptatum odio rem at natus molestiae similique quod cupiditate possimus, voluptas minima facilis ipsa. Reiciendis sunt distinctio est unde aperiam!</p>
      {% endblock %}
    </div>
  </div>
</div>
 
<div class="uol-widget-container">
    <div class="uol-widget">

        <div class="uol-widget__left-col">

            <div class="uol-widget__head">

                <h2 class="uol-widget__title">Default Widget Title</h2>

                <div class="uol-widget__lead">
                    <p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
                </div>

            </div>

        </div>

        <div class="uol-widget__content">

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis ratione sequi aliquam eius animi. Ad quos culpa, earum porro sit repellendus architecto, praesentium quaerat explicabo molestias sapiente id! Cum, architecto.</p>
            <p>Quae tempore recusandae esse ex unde, illo neque repellendus accusamus voluptatum odio rem at natus molestiae similique quod cupiditate possimus, voluptas minima facilis ipsa. Reiciendis sunt distinctio est unde aperiam!</p>

        </div>
    </div>
</div>
  • Content: 
    .uol-widget-container {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  margin-bottom: $spacing-4;
  width: 100%;

  .uol-col-debug & {
    background: rgba(hotpink, .3);
  }

  &:last-of-type {
    margin-bottom: $spacing-7;

    @include media(">=uol-media-m") {
      margin-bottom: $spacing-9;
    }

    @include media(">=uol-media-l") {
      margin-bottom: ($spacing-7 * 2);
    }
  }

  .uol-side-nav-container--populated + .uol-homepage-content & {
    @include media(">=uol-media-l") {
      padding-left: 0;
      padding-right: 0;
    }

    @include media(">=uol-media-xl") {
      padding-left: $spacing-1;
      padding-right: $spacing-1;
    }
  }
}

.uol-widget {
  position: relative;
  margin-top: $spacing-4;
  padding: 0 !important;
  flex-basis: 100% !important;

  @include media("<uol-media-l") {
    max-width: none;
  }

  @include media(">=uol-media-l") {
    margin-top: $spacing-7;
  }
}

  .uol-widget--cards {
    margin-top: 0;
    width: 100%;
  }

  .uol-widget--ctas,
  .uol-widget--content,
  .uol-widget--featured-content,
  .uol-widget--form,
  .uol-widget--news-events,
  .uol-widget--news-tiles,
  .uol-widget--events,
  .uol-widget--description-list,
  .uol-widget--accreditation-logos,
  .uol-widget--wide {
    @extend .uol-col;

    max-width: none;
  }

  .uol-widget--ctas {

    @include media("<uol-media-m") {
      padding-top: $spacing-7 !important;
    }
  }

  .uol-widget--featured-content {
    @include media("<uol-media-l") {
      border-bottom: $spacing-2 solid $color-brand--faded;
      padding-bottom: $spacing-5;
      margin-bottom: $spacing-5;
    }

    @include media(">=uol-media-l") {
      display: flex;
      flex: 2 1 auto;
      flex-basis: auto;
      align-items: flex-start;
    }
  }

  .uol-widget--ctas,
  .uol-widget--form {
    margin-top: 0;
    padding-bottom: 0;
  }

  .uol-widget {

    .uol-side-nav-container--populated + .uol-homepage-content & {
      flex-basis: 100%;
      max-width: none;
      padding: 0 !important;
    }
  }

  .uol-widget__head {
    position: relative;
    box-sizing: border-box;
    padding-bottom: $spacing-5;
    display: flex;
    flex-direction: column;

    // TODO: Horrible IE hack - Find a better way
    .no-csspositionsticky & {
      padding: 3px;
    }

    @include media(">=uol-media-m") {
      // margin: 0 $spacing-5;
      margin: 0;
    }

    @include media(">=uol-media-l") {

      .no-csspositionsticky & {
        padding: 0;
      }
    }

    @include media(">=uol-media-xl") {
      // margin: 0 $spacing-6;
      margin: 0;
    }

    > * {
      max-width: 52rem;
    }

    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        // width: 40%;
        // width: calc(100% / 3);
        padding: $spacing-4 $spacing-4 $spacing-7 0;

        // .uol-side-nav-container--populated + .uol-homepage-content & {
        //   width: 40%;
        // }

        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: $spacing-8;
          background: $color-brand--faded;
          border-radius: 0 0 0 6px;
          z-index: -1;
        }
      }
    }

    .uol-widget--news-events & {
      padding-bottom: 0;
    }

    .uol-widget--list-featured & {
      padding-bottom: $spacing-4;

      @include media(">=uol-media-m") {
        padding-bottom: $spacing-5;
      }

      @include media(">=uol-media-l") {
        padding-bottom: $spacing-6;
      }
    }
  }

  .uol-widget__title {
    @extend .uol-typography-heading-2;

    position: relative;
    margin: $spacing-6 0 0;
    overflow-wrap: break-word;

    @include media("<uol-media-l") {
      margin-top: $spacing-7;
    }

    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      top: -#{$spacing-4};
      left: 0;
      width: $spacing-4;
      height: $spacing-2;
      background-color: $color-brand;

      @include media(">=uol-media-m") {
        width: $spacing-5;
      }

      @include media(">=uol-media-l") {
        width: $spacing-6;
        top: -#{$spacing-5};
      }
    }

    .uol-widget--featured-content & {
      max-width: none;
      margin: 0;

      @include media("<uol-media-l") {
        border-radius: 6px 6px 0 0;
        padding: $spacing-7 $spacing-4 $spacing-6;
        background: $color-brand--faded;

        &::before {
          top: $spacing-6;
          left: $spacing-4;
        }
      }

      @include media(">=uol-media-l") {
        margin-top: $spacing-2;
      }
    }
  }

  .uol-widget__lead {
    padding-top: $spacing-2;

    @include media(">=uol-media-l") {
      padding-top: $spacing-4;
    }

    .uol-widget--featured-content & {

      @include media("<uol-media-l") {
        padding-left: $spacing-4;
        padding-right: $spacing-4;
      }

      @include media("<uol-media-l") {
        padding-top: $spacing-2;
      }
    }
  }

  .uol-widget__head,
  .uol-widget__lead {

    p {
      font-size: 1.125rem;

      @include media(">=uol-media-m") {
        font-size: 1.375rem;
      }

      @include media(">=uol-media-l") {
        font-size: 1.5rem;
      }
    }

    p:first-of-type {
      margin-top: $spacing-4;
    }

    &:last-child,
    p:last-of-type {
      margin-bottom: 0;
    }
  }

  .uol-widget__content {
    margin: $spacing-4 0 0;
    clear: both;
    // overflow-x: hidden;

    .uol-widget--cards & {
      overflow-x: initial;
    }

    @include media(">=uol-media-m") {
      margin: $spacing-4 0 0;
    }

    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        margin-top: 0;
        width: calc(100% / 3 * 2);
        padding: 0 $spacing-6 $spacing-4;
        border-right: 4px solid $color-brand--faded;

        .uol-side-nav-container--populated + .uol-homepage-content & {
          width: 60%;
        }
      }
    }

    .uol-widget--list-featured & {
        margin-top: 0;
    }

    .uol-widget--form & {
      margin-top: $spacing-2;
    }
  }

    .uol-widget__content__text {
      @include media("<uol-media-l") {
        padding-left: $spacing-4;
        padding-right: $spacing-4;
      }
    }

  .uol-widget__link {
    @extend .uol-chevron-right;
    @include link_focus(1px);

    align-self: flex-start;
    font-size: 1.25rem;
    font-weight: $font-weight-medium--sans-serif;
    margin-top: $spacing-4;
    padding-right: 0.2em;
    color: inherit;
    text-decoration: none;
    text-decoration-color: rgba($color-white, 0);
    transition: text-decoration-color 0.3s ease;

    @include media(">=uol-media-m") {
      font-weight: $font-weight-bold--sans-serif;
    }

    @include media("<uol-media-l") {
      margin-top: $spacing-5;
    }
  }

  .uol-widget__left-col {
    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        width: calc(100% / 3);
      }
    }
  }

  .uol-widget__arrow-links {
    list-style-type: none;
    margin: 0;
    padding: 0;

    .uol-widget--featured-content & {
      @include media(">=uol-media-l") {
        margin-top: $spacing-5;
      }
    }
  }

  .uol-widget__arrow-links-item {
    margin: 0 0 $spacing-5 0;

    .uol-widget--featured-content & {
      margin: 0 $spacing-4 $spacing-5 $spacing-4;

      @include media(">=uol-media-l") {
        margin: 0 0 $spacing-4 0;
      }
    }
  }
  
  .uol-widget__arrow-link {
    @extend %text-size-paragraph;
    font-weight: $font-weight-bold--sans-serif;
    padding-top: $spacing-2;
    padding-bottom: $spacing-2;
    display: inline-block;
  }
  • URL: /components/raw/uol-widget/_widget.scss
  • Filesystem Path: src/library/02-components/widget/_widget.scss
  • Size: 7.6 KB 
{
  "widget_title": "Default Widget Title",
  "widget_lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>"
}