University of Leeds Design System v1.0.15

Form block: With Additional Content Before

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 additional content before</h2>

        <div class="uol-rich-text">
            <div class="uol-form__additional-content uol-form__additional-content--before">
                <p>Lead links <a href="/">may be used to offer a user alternative pages</a></p>
                <p>Lead links <a href="/">may be used to offer a user alternative options</a></p>
                <ul>
                    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                    <li>Aliquam tincidunt mauris eu risus.</li>
                    <li>Vestibulum auctor dapibus neque.</li>
                </ul>
            </div>
        </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 additional content before",
    "heading_level": "h2",
    "additional_info_before": "<p>Lead links <a href=\"/\">may be used to offer a user alternative pages</a></p><p>Lead links <a href=\"/\">may be used to offer a user alternative options</a></p><ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Aliquam tincidunt mauris eu risus.</li><li>Vestibulum auctor dapibus neque.</li></ul>"
  }
}