University of Leeds Design System v1.0.15

Form block: With Lead

No notes defined.

{% if form_block %}
  <div class="uol-form__container">

    <div class="uol-form__inner-wrapper">
      {% if form_block.title %}
        <{{ form_block.heading_level if form_block.heading_level else 'h2' }} class="uol-form__title">{{ form_block.title }}</{{ form_block.heading_level if form_block.heading_level else 'h2' }}>
      {% endif %}

      {% if form_block.lead %}
        <div class="uol-form__lead"><p>{{ form_block.lead }}</p></div>
      {% endif %}

      {% if form_block.additional_info_before %}
        <div class="uol-rich-text">
          <div class="uol-form__additional-content uol-form__additional-content--before">
            {{ form_block.additional_info_before  | safe }}
          </div>
        </div>
      {% endif %}

      {% if form_block.form_error %}
          {% render '@uol-form-error-msg', { form_error: form_block.form_error, form_error_id: form_block.form_error_id } %}
      {% endif %}

      <div class="uol-form {{ 'uol-form--button-inline' if form_block.button_inline else 'uol-form--button-block' }}">

        <div class="uol-form__inputs-wrapper">

          {% for field in form_block.fields %}
            {% render '@uol-form-input', field %}
          {% endfor %}

        </div>

        {% if form_block.button %}
          <div class="uol-form__button-wrapper">
            {% render '@uol-button', form_block.button %}
          </div>
        {% endif %}

      </div>

      {% if form_block.additional_info_after  %}
        <div class="uol-rich-text">
          <div class="uol-form__additional-content uol-form__additional-content--after">
            {{ form_block.additional_info_after | safe }}
          </div>
        </div>
      {% endif %}
    </div>

  </div>
{% endif %}
 
<div class="uol-form__container">

    <div class="uol-form__inner-wrapper">

        <h2 class="uol-form__title">Form with lead</h2>

        <div class="uol-form__lead">
            <p>This is an optional lead sentence lorem ipsum dolor sit amet. consectetur adipiscing elit. Fusce in dui eleifend tortor gravida venenatis at non ligula. Donec consectetur ligula at velit feugiat, ac posuere elit luctus.</p>
        </div>

        <div class="uol-form uol-form--button-block">

            <div class="uol-form__inputs-wrapper">

            </div>

        </div>

    </div>

</div>
  • Content: 
    .uol-form-container--centered {
  @extend .uol-col;
  @extend .uol-col-m-10;
  @extend .uol-col-xl-8;

  margin: 0 auto;
}

.uol-form__container {
  border: 1px solid $color-border--light;
  border-radius: 6px;
  // overflow: hidden;
  margin-bottom: $spacing-6;

  &.uol-form-container--centered {
    padding: 0;
  }

  // Used for when Course search is in Home page
  .uol-homepage-content & {
    margin: 0;
    width: calc(100% - 2px);
  }

  .uol-side-nav-container--populated + .uol-homepage-content & {

    .uol-form__inner-wrapper {

      @include media(">=uol-media-l") {
        flex-basis: 100%;
      }

      @include media(">=uol-media-xl") {
        flex-basis: 55.555%;
      }
    }

      .uol-form {

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

    .uol-form__img-wrapper {
      display: none;

      @include media(">=uol-media-xl") {
        display: inline-flex;
        flex-basis: 44.444%;
      }
    }
  }
}

.uol-form__inner-wrapper {
  padding: $spacing-5 $spacing-4 $spacing-6;
  background-color: $color-grey--light;

  @include media(">=uol-media-l") {
    flex-basis: 58.333%;
    padding: $spacing-5 $spacing-5 2.5rem;
  }

  @include media(">=uol-media-xl") {
    flex-basis: 50%;
    padding: 2.5rem $spacing-6;
  }
}

  .uol-form__title {
    color: $color-font;
    font-size: 2rem;
    line-height: 1.25;
    font-family: $font-family-serif;
    margin: 0;
    padding-bottom: $spacing-2;

    + .uol-form {
      padding-top: $spacing-2;
    }

    @include media(">=uol-media-m") {
      font-size: 2.25rem;
      line-height: 1.333;
    }

    @include media(">=uol-media-l") {
      font-size: 2.625rem;
      line-height: 1.238;
    }
  }

  .uol-form__lead {
    display: block;
    color: $color-font;
    font-size: 1.125rem;
    line-height: 1.556;
    font-family: $font-family-sans-serif;
    margin: 0 0 $spacing-6;
    font-weight: normal;

    // @include media(">=uol-media-s") {
    //   max-width: 31.5rem;
    // }

    @include media(">=uol-media-m") {
      max-width: 32rem;
    }

    @include media(">=uol-media-l") {
      font-size: 1.25rem;
      max-width: 41rem;
    }
  }

.uol-form {
  flex-direction: row;

  &.uol-form--button-inline {
    @include media(">=uol-media-m") {
      display: flex;
    }
  }
}

.uol-form__container--with-image {

  @include media(">=uol-media-l") {
    display: flex;
  }
}

  .uol-form__img-wrapper {
    background-color: $color-grey--light;
    position: relative;
    display: none;
    z-index: -2;

    @include media(">=uol-media-l") {
      display: inline-flex;
      flex-basis: 41.666%;
    }

    @include media(">=uol-media-xl") {
      flex-basis: 50%;
    }
  }

    .uol-form__img {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

    .uol-form--button-inline {
      .uol-form__inputs-wrapper {
        flex: 1;
      }

      .uol-form__input-container {
        margin-bottom: 0;
      }

      .uol-form__button-wrapper {
        align-self: flex-end;

        .uol-button {
          @include button_focus(-6px);
        }

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

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

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

        [class^="uol-button"] {
          width: 100%;
          height: 3.125rem;
          line-height: 0.75;
        }
      }
    }

    .uol-form__button-wrapper {
      .uol-form--button-block & {

      @include media(">=uol-media-s") {
        display: inline-block;
        width: initial;
      }

        .uol-button {
          width: 100%;
        }
      }
    }

.uol-form__additional-content {
  padding: 0;
  margin: 0;

  a {
    @include link_focus();
  }
}

.uol-form__additional-content--before {
  .uol-rich-text & {
    margin: $spacing-4 0;

    > * {
      margin-bottom: $spacing-4;
    }

    > *:last-child {
      margin-bottom: $spacing-6;
    }
  }
}

.uol-form__additional-content--after {
  .uol-rich-text & {
    margin: $spacing-6 0 0;

    > * {
      margin-bottom: $spacing-4;
    }

    > *:last-child {
      margin-bottom: 0;
    }
  }
}

.uol-form-container--overflow {
  overflow: visible !important;

  & .uol-widget__content {
    overflow: visible  !important;
  }
}
  • URL: /components/raw/uol-form-block/_form-block.scss
  • Filesystem Path: src/library/02-components/form-block/_form-block.scss
  • Size: 4.5 KB 
{
  "form_block": {
    "action": "/example-form-action",
    "title": "Form with lead",
    "heading_level": "h2",
    "lead": "This is an optional lead sentence lorem ipsum dolor sit amet. consectetur adipiscing elit. Fusce in dui eleifend tortor gravida venenatis at non ligula. Donec consectetur ligula at velit feugiat, ac posuere elit luctus."
  }
}