Staffordshire University Components

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--has-blurredBg">
    <div class="masthead__bg  masthead__bg--blurred">
        <img src="../../img/masthead4.jpg" />
    </div>
    <div class="masthead__inner">
        <div class="masthead__bg">
            <img src="../../img/masthead4.jpg" />
        </div>
        <div class="wrap">
            <nav class="breadcrumbs">
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Courses</a>
                    </li>
                    <li>
                        <a href="#">Subjects</a>
                    </li>
                    <li>
                        <a href="#">Relatively Long Fourth Level</a>
                    </li>
                </ul>
            </nav>

            <div class="title  title--has-tail  js-waypoint">
                <h1 class="title__highlight  h1">
                    Computer Gameplay Design, Production and Programming
                </h1>
            </div>

            <div class="title  title--bg-white  title--has-tail  js-waypoint">
                <h6 class="title__highlight">
                    MSci
                </h6>
            </div>

        </div>
    </div>

    <div class="masthead__overlay">
        <div class="wrap">

            <div class="masthead__overlayInner">
                <div class="grid  grid-3-cols">
                    <div>
                        <div class="card  card--light">
                            <div class="card__content">
                                <h2 class="h4  card__title">Study Options </h2>
                                <form class="form__group">
                                    <div class="form__item">
                                        <input type="radio" id="study-option-1" name="study-option" checked /> <label for="study-option-1">Full-time, Stoke-on-Trent campus</label>
                                    </div>
                                    <div class="form__item">
                                        <input type="radio" id="study-option-2" name="study-option" /> <label for="study-option-2">Full-time, City of Stoke-On-Trent Sixth Form College, with a foundation year</label>
                                    </div>
                                    <div class="form__item">
                                        <input type="radio" id="study-option-3" name="study-option" /> <label for="study-option-3">Full-time, Stoke-On-Trent campus, with a placement year</label>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="card  card--light">
                            <div class="card__content">
                                <h2 class="h4  card__title">Award Type</h2>
                                <form class="form__group">
                                    <div class="form__item">
                                        <input type="radio" id="award-type-msci" name="award-type" checked /> <label for="award-type-msci">MSci</label>
                                    </div>
                                    <div class="form__item">
                                        <input type="radio" id="award-type-bschons" name="award-type" /> <label for="award-type-bschons">BSc (Hons)</label>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="card  card--light">
                            <div class="card__content">
                                <h2 class="h4  card__title">Key Facts</h2>
                                <dl class="meta  meta--inline">
                                    <div class="meta__item">
                                        <dt>UCAS code:</dt>
                                        <dd>I621</dd>
                                    </div>
                                    <div class="meta__item">
                                        <dt>Location:</dt>
                                        <dd>Stoke-on-Trent campus</dd>
                                    </div>
                                    <div class="meta__item">
                                        <dt>Duration:</dt>
                                        <dd>3 Years</dd>
                                    </div>
                                    <div class="meta__item">
                                        <dt>Start date:</dt>
                                        <dd>21 September 2020</dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="slab  slab--bg-slate">
    <div class="wrap">
        <div class="grid  grid-3-cols">
            <div>
                <div class="card  card--ksp  card--light">
                    <div class="card__content">
                        <h3 class="h4  card__title">£11 million funding secured for business</h3>
                        <p>Text describing the USP here </p>
                    </div>
                </div>
            </div>

            <div>
                <div class="card  card--ksp  card--light">
                    <div class="card__content">
                        <h3 class="h4  card__title">Over 400 regional vacancies filled</h3>
                        <p>Text describing the USP here </p>
                    </div>
                </div>
            </div>

            <div>
                <div class="card  card--ksp  card--light">
                    <div class="card__content">
                        <h3 class="h4  card__title">71% of our apprentices secure a permanent position</h3>
                        <p>Text describing the USP here </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{% set slabBg = slabBg ? 'slab--bg-' ~ slabBg : 'slab--bg-slate' %}
{% set bgImgURL = bgImg is not empty ?: ('/img/masthead' ~ random(5) ~ '.jpg') %}

<div class="masthead  masthead--has-blurredBg">
  <div class="masthead__bg  masthead__bg--blurred">
    {% if bgImg %}
      {{ bgImg }}
    {% else %}
      <img src="{{ bgImgURL | path }}"/>
    {% endif %}
  </div>
  <div class="masthead__inner">
    <div class="masthead__bg">
      {% if bgImg %}
        {{ bgImg }}
      {% else %}
        <img src="{{ bgImgURL | path }}"/>
      {% endif %}
    </div>
    <div class="wrap">
      <nav class="breadcrumbs">
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Courses</a>
          </li>
          <li>
            <a href="#">Subjects</a>
          </li>
          <li>
            <a href="#">Relatively Long Fourth Level</a>
          </li>
        </ul>
      </nav>

      {% include '@title' with {
        text: title,
        modifiers: ['has-tail'],
        textElement: 'h1',
        textElementStyle: 'h1',
        animate: true
      } %}
      {% include '@title' with {
        text: 'MSci',
        modifiers: ['bg-white', 'has-tail'],
        textElement: 'h6',
        animate: true
      } %}
    </div>
  </div>

  <div class="masthead__overlay">
    <div class="wrap">

      <div class="masthead__overlayInner">
        <div class="grid  grid-3-cols">
          <div>
            <div class="card  card--light">
              <div class="card__content">
                <h2 class="h4  card__title">Study Options {{ bgImg }}</h2>
                <form class="form__group">
                  <div class="form__item">
                    <input type="radio" id="study-option-1" name="study-option" checked/> <label for="study-option-1">Full-time, Stoke-on-Trent campus</label>
                  </div>
                  <div class="form__item">
                    <input type="radio" id="study-option-2" name="study-option"/> <label for="study-option-2">Full-time, City of Stoke-On-Trent Sixth Form College, with a foundation year</label>
                  </div>
                  <div class="form__item">
                    <input type="radio" id="study-option-3" name="study-option"/> <label for="study-option-3">Full-time, Stoke-On-Trent campus, with a placement year</label>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <div>
            <div class="card  card--light">
              <div class="card__content">
                <h2 class="h4  card__title">Award Type</h2>
                <form class="form__group">
                  <div class="form__item">
                    <input type="radio" id="award-type-msci" name="award-type" checked/> <label for="award-type-msci">MSci</label>
                  </div>
                  <div class="form__item">
                    <input type="radio" id="award-type-bschons" name="award-type"/> <label for="award-type-bschons">BSc (Hons)</label>
                  </div>
                </form>
              </div>
            </div>
          </div>

          <div>
            <div class="card  card--light">
              <div class="card__content">
                <h2 class="h4  card__title">Key Facts</h2>
                <dl class="meta  meta--inline">
                  <div class="meta__item">
                    <dt>UCAS code:</dt>
                    <dd>I621</dd>
                  </div>
                  <div class="meta__item">
                    <dt>Location:</dt>
                    <dd>Stoke-on-Trent campus</dd>
                  </div>
                  <div class="meta__item">
                    <dt>Duration:</dt>
                    <dd>3 Years</dd>
                  </div>
                  <div class="meta__item">
                    <dt>Start date:</dt>
                    <dd>21 September 2020</dd>
                  </div>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="slab  {{ slabBg }}">
  <div class="wrap">
    <div class="grid  grid-3-cols">
      <div>
        <div class="card  card--ksp  card--light">
          <div class="card__content">
            <h3 class="h4  card__title">£11 million funding secured for business</h3>
            <p>Text describing the USP here </p>
          </div>
        </div>
      </div>

      <div>
        <div class="card  card--ksp  card--light">
          <div class="card__content">
            <h3 class="h4  card__title">Over 400 regional vacancies filled</h3>
            <p>Text describing the USP here </p>
          </div>
        </div>
      </div>

      <div>
        <div class="card  card--ksp  card--light">
          <div class="card__content">
            <h3 class="h4  card__title">71% of our apprentices secure a permanent position</h3>
            <p>Text describing the USP here </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  • Content: 
    .masthead {
  $overlay-breakpoint: $third-breakpoint + 10rem;

  display: flex;
  flex-wrap: wrap;
  background-color: $offwhite;
  box-sizing: border-box;
  position: relative;

  &__bg {
    // should use an abs:pos div with responsive image rather than background image
    // CG: This is an additional comment
    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
      }
    }

    &--blurred {
      overflow: hidden;

      img {
        transform: scale(1.1);
        filter: blur(1em);
      }
      @media (min-width: $overlay-breakpoint) {
        display: none; // this full-viewport filter is actually quite process intensive, so get rid as soon as it's not needed
      }
    }
  }

  &__inner {
    display: flex;
    flex-wrap: wrap;
    min-height: 65vmin;
    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;
    }
  }

  &__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);
        }
        backdrop-filter: blur(1em);
      }
    }
  }

  &--has-blurredBg {
    .masthead__overlay {
      background: rgba(black, 0.75);
      @supports (backdrop-filter: blur(1em)) {
        background: rgba(black, 0.6);
      }

      @media (min-width: $overlay-breakpoint) {
        background: none;
      }
    }
  }

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

  &--shallow {
    .masthead__inner {
      min-height: 40vh;
    }
  }
}
  • URL: /components/raw/masthead/_masthead.scss
  • Filesystem Path: src/components/masthead/_masthead.scss
  • Size: 2.5 KB