University of Staffordshire Pattern Library

Masthead: Course

Use an inline style on the <img> element to add a focal point to your responsive image, to stop subjects from being cropped on resize.

eg. style="object-position: 60% 20%" would indicate the focal point is approximately 60% along the x-axis from the left, and 20% down the y-axis from the top.

Use srcset to serve smaller images to smaller screens, this is right at the top of the page, and will affect performance.

<div class="masthead  masthead--course">
    <div class="wrap">
        <div class="masthead__course-info">
            <div class="masthead__course-options">
                <h1 class="title">Esports <span class="masthead__award-type  font-md">BA (Hons)</span></h1>
                <p class="masthead__ucas-code"><strong>UCAS code</strong> S101</p>

                <label for="study-option-selector">Study options</label>
                <select id="study-option-selector--bsc-hons" class="masthead__study-option-selector" data-award="bsc-hons" title="Study Options">
                    <option selected>Full-time, Stoke-on-Trent campus</option>
                    <option>Full-time, City of Stoke-On-Trent Sixth Form College, with a foundation year</option>
                    <option>Full-time, Stoke-On-Trent campus, with a placement year</option>
                </select>
                <select id="study-option-selector--msci" class="masthead__study-option-selector  one-item" style="display: none;" data-award="msci" title="Study Options">
                    <option selected>Full-time</option>
                </select>

                <label for="award-type-selector">Award</label>
                <select id="award-selector" class="masthead__award-selector" title="Award">
                    <option value="bsc-hons">BSc (Hons)</option>
                    <option value="msci">MSci</option>
                </select>

                <div class="grid  grid-2-cols">
                    <div>
                        <h2 class="h4  title">Location</h2>
                        <p>Stoke-on-Trent campus</p>
                    </div>
                    <div>
                        <h2 class="h4  title">Duration</h2>
                        <p>4 years</p>
                    </div>
                </div>

                <h2 class="h4  title">Entry requirements</h2>
                <p>112 - 120 UCAS points, plus GCSE Mathematics grade 5 or above</p>

                <ul class="list--inline">
                    <li>

                        <a href="" class="button">

                            Apply now
                        </a>

                    </li>
                    <li>

                        <a href="" class="button  button--grey">

                            Book an open day
                        </a>

                    </li>
                </ul>
            </div>

            <div class="masthead__course-hero">

                <img src="../../images/masthead2.jpg" />

            </div>
        </div>
    </div>
</div>

<div class="wrap">
    <p class="intro">Course page body copy</p>
</div>
 
{% set slabBg = slabBg ? 'slab--bg-' ~ slabBg : 'slab--bg-slate' %}
{% set bgImgURL = bgImg is not empty ?: ('/images/masthead' ~ random(5) ~ '.jpg') %}

<div class="masthead  masthead--course">
  <div class="wrap">
    <div class="masthead__course-info">
      <div class="masthead__course-options">
        <h1 class="title">Esports <span class="masthead__award-type  font-md">BA (Hons)</span></h1>
        <p class="masthead__ucas-code"><strong>UCAS code</strong> S101</p>

        <label for="study-option-selector">Study options</label>
        <select id="study-option-selector--bsc-hons" class="masthead__study-option-selector" data-award="bsc-hons" title="Study Options">
          <option selected>Full-time, Stoke-on-Trent campus</option>
          <option>Full-time, City of Stoke-On-Trent Sixth Form College, with a foundation year</option>
          <option>Full-time, Stoke-On-Trent campus, with a placement year</option>
        </select>
        <select id="study-option-selector--msci" class="masthead__study-option-selector  one-item" style="display: none;" data-award="msci" title="Study Options">
          <option selected>Full-time</option>
        </select>

        <label for="award-type-selector">Award</label>
        <select id="award-selector" class="masthead__award-selector" title="Award">
            <option value="bsc-hons">BSc (Hons)</option>
            <option value="msci">MSci</option>
        </select>

        <div class="grid  grid-2-cols">
          <div>
            <h2 class="h4  title">Location</h2>
            <p>Stoke-on-Trent campus</p>
          </div>
          <div>
            <h2 class="h4  title">Duration</h2>
            <p>4 years</p>
          </div>
        </div>

        <h2 class="h4  title">Entry requirements</h2>
        <p>112 - 120 UCAS points, plus GCSE Mathematics grade 5 or above</p>

        <ul class="list--inline">
          <li>
            {% include '@button' with {
              text: 'Apply now'
            } %}
          </li>
          <li>
            {% include '@button' with {
              text: 'Book an open day',
              classes: ['button--grey']
            } %}
          </li>
        </ul>
      </div>

      <div class="masthead__course-hero">
        {% if bgImg %}
          {{ bgImg }}
        {% else %}
          <img src="{{ bgImgURL | path }}"/>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<div class="wrap">
  <p class="intro">Course page body copy</p>
</div>
  • Content: 
    .masthead {
  $overlay-breakpoint: $third-breakpoint + 10rem;
  background-color: $dark-blue;//$offwhite;
  box-sizing: border-box;
  position: relative;

  &--burgundy {
    background-color: $burgundy;
  }

  &--grey {
    background-color: $grey-50-pc;

    & .title {
      color: $dark-blue!important;
    }
  }

  @media (min-width: map_get($breakpoint-stages, 'tablet-wide')) {
    &__img {
      margin-bottom: -$spacing-3xl;
    }
  }

  & .title {
    color: white;
    max-width: 30rem;
  }

  &__overlay {
    align-self: flex-end;
    align-content: flex-end;
    width: 100%;
    padding: $spacing-lg 0 0;
    box-sizing: border-box;
    background: black;
    color: white;
    z-index: 1;

    @media (min-width: $overlay-breakpoint) {
      background: none;
      padding: 0;
      margin-bottom: $spacing-lg;

      &Inner {
        margin: 0 -#{$grid-gutter};
        padding: $spacing-lg $grid-gutter 0;
        background: rgba(black, 0.75);
        @supports (backdrop-filter: blur(1em)) {
          background: rgba(black, 0.6);
          /*min-height: 340px;*/
        }
        backdrop-filter: blur(1em);

        & .meta--inline dd::before {
          display: none;
        }
      }
    }
  }

  .wrap {
    position: relative;
    align-self: flex-end;
    z-index: 0;
  }

  &--shallow {
    background: $grey-50-pc url('../images/masthead-shallow-bg.svg') no-repeat;
    background-size: cover;

    & .title {
      color: $dark-blue;
    }

    .masthead__inner {
      min-height: 20vh;
      padding-top: 8rem;
    }
  }

  &--course {
    background: $dark-blue;
    color: white;

    & .title {
      color: $neon;
      padding-left: 0;
    }
  }

  &__award-type {
    color: white;
  }

  &__ucas-code strong {
    color: $neon;
    margin-right: $spacing-md;
  }

  &__course-info {
    display: flex;
  }

  @media (max-width: map_get($breakpoint-stages, 'tablet')) {
    &__course-info {
      flex-direction:column-reverse;
    }

    &__course-hero {
      margin-left: -$spacing-xl;
      margin-right: -$spacing-xl;
    }
  }

  @media (min-width: map_get($breakpoint-stages, 'tablet')) {
    &__course-info {  
      & > div {
        width: 50%;
      }

      & img {
        height: 100%;
        position: absolute;
        max-width: none;
        z-index: -1;

        @media(max-width: map_get($breakpoint-stages, 'tablet-wide')) {
          left: 40%;
        }
        @media(max-width: map_get($breakpoint-stages, 'desktop')) {
          left: 35%;
        }
        @media(max-width: map_get($breakpoint-stages, 'desktop-wide')) {
          left: 25%;
        }

        &.narrow-aspect {
          left: 50%;
        }
      }
    }
  }

  &__course-options {
    background:  $dark-blue;
    padding-right: $spacing-xl;

    & label {
      margin: $spacing-lg 0 $spacing-sm;
    }

    & .title {
      margin: $spacing-2xl 0 0 0;
    }

    & select.one-item {
      background: white;
    }


  }

  @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
    &--profile {
      .masthead__inner {
        padding: $spacing-6xl 0 $spacing-xl;
        figure {
          margin: 2rem 0 2rem;
        }
      }
    }
  }

  &__inner {
    display: flex;
    flex-wrap: wrap;
    min-height: 35vmin;
    padding: 12rem 0 $spacing-xl;
    align-self: flex-end;
    align-content: flex-end;
    width: 100%;
    position: relative;
    box-sizing: border-box;

    @media (min-width: $overlay-breakpoint) {
      position: static;
    }
  }

  &__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;

    img {
      @supports (object-fit: cover) {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 60% 35%; // we're going to assume the image's focal point is roughly slightly-above-center right, but specify this as an inline style for each image
      }
    }
  }

  // CG: For home page masthead
  &-home {
    position: relative;
    background: $red url('../images/bg-knot-whole-blue.svg') center center no-repeat;
    background-size: 120%;
    background-repeat: no-repeat;
    min-height: 400px;
    @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
      min-height: 500px;
    }

    &--dark-blue-with-red {
      background: $dark-blue url('../images/bg-knot-whole-red.svg') center center no-repeat;
      background-size: 120%;
      background-repeat: no-repeat;
    }

    &--dark-blue-with-neon {
      background: $dark-blue url('../images/bg-knot-whole-neon.svg') center center no-repeat;
      background-size: 120%;
      background-repeat: no-repeat;
    }

    &--neon-with-dark-blue {
      background: $neon url('../images/bg-knot-whole-blue.svg') center center no-repeat;
      background-size: 120%;
      background-repeat: no-repeat;
    }

    &__hero {
      padding-top: $spacing-lg;
      padding-bottom: $spacing-lg;
      overflow: hidden;

      & > img {
        padding-left: 25%;
        float: right;
      }
    }

    @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
      .masthead-home__img {
        display: none;
      }
      .masthead-home__mobile {
        display: block;
      }
    }
    @media (min-width: map_get($breakpoint-stages, 'mobile-wide')) {
      .masthead-home__img {
        display: block;
      }
      .masthead-home__mobile {
        display: none;
      }
    }

    &__title.title {
      max-width: 30rem!important;
      @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
        & h1 {
          font-size: 1.75rem;
        }
      }

      & > h1 {
        font-weight: 800;
      }
    }

    &__subtitle {
      max-width: 50rem!important;
      @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
        margin-top: 10rem;
      }
      margin-bottom: $spacing-xl;
    }

    &__story {
      position: absolute;
      @media (max-width: map_get($breakpoint-stages, 'mobile-wide')) {
        top: $spacing-md;
      }
      z-index: 3;
      bottom: $spacing-md;
      margin-right: $spacing-lg;
    }
  }
}

.masthead--with-image {
  & .masthead__inner {
    padding: 2rem 0 $spacing-xl;
  }

  & h1 {
    margin-top: 8rem;
  }
}

.card {
  & a.masthead__school-link {
    color: white;
    border-bottom: 1px solid white!important;

    &:hover {
      border-bottom: none!important;
      text-decoration: none;
    }
  }

}
  • URL: /components/raw/masthead/_masthead.scss
  • Filesystem Path: src\components\masthead\_masthead.scss
  • Size: 6.9 KB