University of Staffordshire Pattern Library

Masthead

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--shallow  masthead--no-bg">
    <div class="masthead__inner">
        <div class="wrap">

            <div class="title  js-waypoint">
                <h1 class="">
                    Professional training and development
                </h1>
            </div>
        </div>
    </div>
</div>

<div class="wrap">
    <nav class="breadcrumbs">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Level 1</a>
            </li>
            <li>
                <a href="#">Level 2</a>
            </li>
        </ul>
    </nav>
</div>
 
<div class="masthead  masthead--shallow  masthead--no-bg">
  <div class="masthead__inner">
    <div class="wrap">
      {% include '@title' with {
        text: 'Professional training and development',
        textElement: 'h1',
        animate: true
      } %}
    </div>
  </div>
</div>

<div class="wrap">
  {% include '@breadcrumbs' %}
</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