University of Leeds Design System v1.0.16

Task Banner

No notes defined.

<div class="uol-task-banner">
  <div class="uol-task-banner__outer">
    <div class="uol-task-banner__inner">
      <div class= "uol-task-banner__key-task">
        {% render '@uol-content-block', key_task %}
      </div>
      <div class="uol-task-banner__course-section">
        <div class="uol-task-banner__course-search">
          {% render '@uol-form', { form: form } %}
        </div>
        <div class="uol-task-banner__course-cards">
          {% render '@uol-content-block', undergraduate_block_1 %}
          {% render '@uol-content-block', undergraduate_block_2 %}
          {% render '@uol-content-block', postgraduate_block_1 %}
          {% render '@uol-content-block', postgraduate_block_2 %}
        </div>
      </div>
    </div>
  </div>
</div>
 
<div class="uol-task-banner">
    <div class="uol-task-banner__outer">
        <div class="uol-task-banner__inner">
            <div class="uol-task-banner__key-task">

                <div id="block1" class="uol-content-block">

                    <h2 class="uol-content-block__heading">Shape the world you want</h2>

                    <p class="uol-content-block__copy">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum nulla maiores, tenetur deserunt ad reiciendis eum! Ratione placeat eos, ipsum ullam iste doloribus dolor molestias, necessitatibus nihil magni distinctio? </p>

                    <button class="uol-button uol-button--default
    " type="submit">Hear from our students</button>

                </div>
            </div>
            <div class="uol-task-banner__course-section">
                <div class="uol-task-banner__course-search">

                    <div class="uol-form__container   ">

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

                            <h2 class="uol-form__title">Find your course</h2>

                            <form class="uol-form" action="/" role=search>

                                <div class="uol-form__input-group  uol-form__input-group--inline">

                                    <div class="uol-form__input-container 
">

                                        <div role="radiogroup" aria-labelledby="randomId10" class="uol-form__custom-fieldset">

                                            <span id="randomId10" class="uol-form__custom__legend">Course type</span>

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

                                                <div class="uol-form__input--radio-wrapper">
                                                    <input class="uol-form__input--radio" type="radio" id="radio-five" name="course-type-2" value="undergraduate" checked>
                                                    <label class="uol-form__input--radio__label" for="radio-five">Undergraduate</label>
                                                    <span class="uol-form__input--custom-radio" hidden>
                                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                                            <circle cx="12" cy="12" r="12" />
                                                        </svg>
                                                    </span>
                                                </div>

                                                <div class="uol-form__input--radio-wrapper">
                                                    <input class="uol-form__input--radio" type="radio" id="radio-six" name="course-type-2" value="masters">
                                                    <label class="uol-form__input--radio__label" for="radio-six">Masters</label>
                                                    <span class="uol-form__input--custom-radio" hidden>
                                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                                            <circle cx="12" cy="12" r="12" />
                                                        </svg>
                                                    </span>
                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                </div>

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

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

                                        <div class="uol-form__input-container 
">

                                            <label class="uol-form__input-label" for="inputId2">
                                                <span class="uol-form__input-label__text">Search courses</span>

                                            </label>

                                            <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                                                <!--  -->

                                                <input class="uol-form__input  uol-form__input--search" type="search" id="inputId2" name="searchCourses1" value="" autocomplete="off">

                                                <!--  -->
                                            </div>

                                        </div>

                                    </div>

                                    <div class="uol-form__button-wrapper">
                                        <button class="uol-button uol-button--primary
    " type="submit">Search</button>

                                    </div>

                                </div>

                            </form>

                            <div class="uol-rich-text">
                                <div class="uol-form__additional-content uol-form__additional-content--after">
                                    <p><a href="#">Course A-Z</a><a href="#">Browse by subject</a></p>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="uol-task-banner__course-cards">

                    <div id="ug1" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Open days and campus visits</h3>

                        <p class="uol-content-block__copy">Get a feel for our campus and university life at Leeds</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Upcoming open days</a></p>

                    </div>

                    <div id="ug2" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Help with your application</h3>

                        <p class="uol-content-block__copy">All you need to know in our step-by-step guide to applying</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Application information</a></p>

                    </div>

                    <div id="pg1" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Postgraduate discovery days</h3>

                        <p class="uol-content-block__copy">Ask our experts anything about postgraduate study</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Upcoming fairs</a></p>

                    </div>

                    <div id="pg2" class="uol-content-block">

                        <h3 class="uol-content-block__heading">Funding and scholarships</h3>

                        <p class="uol-content-block__copy">Learn about the different ways we can help you fund your studies</p>

                        <p><a href="#" class="uol-content-block__arrow-link uol-arrow-link">Funding options</a></p>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  • Content: 
    $tasksSpacing: $spacing-4;
$keyTaskSpacingDesktop: 72px;
$cardsDirectionMobile: column;
$contentBlockHorizPadding: 64px;
$keyTaskBlockColour: #d75c47;
$courseCardColour: #f7e5e5;
$courseSearchColour: #fff;
$leftSectionPercentage: 40%;

.uol-task-banner {
  &__outer {
    background: $keyTaskBlockColour;
  }

  &__inner {
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    padding: $tasksSpacing calc(#{$tasksSpacing} * 2);
  }

  &__key-task {
    width: calc(50% - #{$tasksSpacing});
    width: 100%;
    padding: $spacing-4 0;
    max-width: 500px;
  }

  &__course-section {
    position: relative;
    top: 0;
    margin: 0 calc(#{$tasksSpacing} * -2) calc(#{$tasksSpacing} * -2);
    margin-top: $tasksSpacing;
    background: $courseCardColour;
    
    .uol-form__inner-wrapper {
      background: $courseSearchColour;
      
    }
    .uol-form__input-container {
      margin-bottom: 0;
    }
    .uol-form__container {
      border: none;
      margin-bottom: 0;
    }

    .uol-form__additional-content a {
      margin-right: $tasksSpacing;
    }

    .uol-form__custom-fieldset {
      margin-bottom: 0;
      .uol-form__input--radio-wrapper {
        margin-right: $tasksSpacing;
      }
      .uol-form__inputs-wrapper {
        display: flex;
      }
    }
  }
        
  &__course-search {
    background: $courseSearchColour;
  }
        
  &__course-cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: $cardsDirectionMobile;
    text-align: center;     
          
    .uol-content-block {
      padding: $tasksSpacing calc(#{$tasksSpacing} / 2);
      width: calc(100% - #{$tasksSpacing});
    }
  }
}

@media only screen and (min-width: 768px) {
  .uol-task-banner__key-task {
    width: calc(#{$leftSectionPercentage} - calc(#{$tasksSpacing} * 3));
    padding: $keyTaskSpacingDesktop 0;
  }
   
  .uol-task-banner__course-section {
    position: absolute;
    top: 0;
    left: calc(#{$leftSectionPercentage});
    width: calc(100% - #{$leftSectionPercentage} - calc(#{$tasksSpacing} * 2));
    margin: calc(#{$tasksSpacing} * 3) 0 0;
    
    .uol-task-banner__course-cards {
      flex-direction: row;
    }
     
    .uol-content-block {
      padding: calc(#{$tasksSpacing} * 3) $contentBlockHorizPadding !important;
      width: calc(50% - #{$contentBlockHorizPadding} * 2);
    }
  }
}
  • URL: /components/raw/uol-task-banner/_task-banner.scss
  • Filesystem Path: src/library/02-components/task-banner/_task-banner.scss
  • Size: 2.4 KB
  • Content: 
    export const uolTaskBanner = () => {
 
  const courseCards = document.getElementsByClassName("uol-task-banner__course-cards");
  
  if (courseCards) {   
    let ug1 = document.getElementById("ug1");
    let ug2 = document.getElementById("ug2");
    let pg1 = document.getElementById("pg1");
    let pg2 = document.getElementById("pg2");

    ug1.style.display = "block";
    ug2.style.display = "block";
    pg1.style.display = "none";
    pg2.style.display = "none";

    const radios = document.getElementsByClassName("uol-form__input--radio");

    const undergraduateRadio = radios[0];
    undergraduateRadio.addEventListener("click", function() {
      ug1.style.display = "block";
      ug2.style.display = "block";
      pg1.style.display = "none";
      pg2.style.display = "none";
    });

    const postgraduateRadio = radios[1];
    postgraduateRadio.addEventListener("click", function() {
      ug1.style.display = "none";
      ug2.style.display = "none";
      pg1.style.display = "block";
      pg2.style.display = "block";
    });
  }
 
}
  • URL: /components/raw/uol-task-banner/task-banner.module.js
  • Filesystem Path: src/library/02-components/task-banner/task-banner.module.js
  • Size: 1.1 KB 
{
  "form": {
    "heading_level": "h2",
    "button_inline": true,
    "action": "/",
    "title": "Find your course",
    "button": {
      "content": "Search",
      "type": "submit",
      "style": "primary"
    },
    "form_group": {
      "inline_fields": true,
      "fields": [
        {
          "type": "radio",
          "heading_level": "h3",
          "legend": "Course type",
          "group_label_id": "randomId10",
          "options": [
            {
              "id": "radio-five",
              "name": "course-type-2",
              "value": "undergraduate",
              "label": "Undergraduate",
              "checked": true
            },
            {
              "id": "radio-six",
              "name": "course-type-2",
              "value": "masters",
              "label": "Masters"
            }
          ]
        }
      ]
    },
    "additional_info_after": "<p><a href=\"#\">Course A-Z</a><a href=\"#\">Browse by subject</a></p>",
    "fields": [
      {
        "type": "search",
        "id": "inputId2",
        "name": "searchCourses1",
        "label": "Search courses",
        "aria-invalid": "false",
        "autocomplete": "off",
        "has_icon": true
      }
    ]
  },
  "key_task": {
    "id": "block1",
    "heading": {
      "level": "2",
      "title": "Shape the world you want"
    },
    "copy": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nostrum nulla maiores, tenetur deserunt ad reiciendis eum! Ratione placeat eos, ipsum ullam iste doloribus dolor molestias, necessitatibus nihil magni distinctio? ",
    "button": {
      "style": "default",
      "type": "submit",
      "content": "Hear from our students"
    }
  },
  "undergraduate_block_1": {
    "id": "ug1",
    "heading": {
      "level": "3",
      "title": "Open days and campus visits"
    },
    "copy": "Get a feel for our campus and university life at Leeds",
    "arrowLink": {
      "url": "#",
      "title": "Upcoming open days"
    }
  },
  "undergraduate_block_2": {
    "id": "ug2",
    "heading": {
      "level": "3",
      "title": "Help with your application"
    },
    "copy": "All you need to know in our step-by-step guide to applying",
    "arrowLink": {
      "url": "#",
      "title": "Application information"
    }
  },
  "postgraduate_block_1": {
    "id": "pg1",
    "heading": {
      "level": "3",
      "title": "Postgraduate discovery days"
    },
    "copy": "Ask our experts anything about postgraduate study",
    "arrowLink": {
      "url": "#",
      "title": "Upcoming fairs"
    }
  },
  "postgraduate_block_2": {
    "id": "pg2",
    "heading": {
      "level": "3",
      "title": "Funding and scholarships"
    },
    "copy": "Learn about the different ways we can help you fund your studies",
    "arrowLink": {
      "url": "#",
      "title": "Funding options"
    }
  }
}