Staffordshire University Components

Banner: Align Full

There are no notes for this item.

<div class="banner  align-full">
    <div class="banner__bg">
        <img src="https://placeimg.com/1200/400" />
    </div>

    <div class="wrap">
        <div class="banner__body">
            <div class="hgroup">
                <div class="title">
                    <div class="h2  title__highlight">Undergraduate Open Day</div>
                </div>
                <div class="title  title--bg-slate">
                    <div class="h4  title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
                </div>
                <div class="title  title--bg-white">
                    <p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p>
                </div>
            </div>

            <div class="banner__cta">
                <a href="" class="button  button--caps">Book an open day - a long button title</a>
            </div>
        </div>
    </div>
</div>
 
<div class="banner  align-full">
  <div class="banner__bg">
    <img src="https://placeimg.com/1200/400"/>
  </div>

  <div class="wrap">
    <div class="banner__body">
      <div class="hgroup">
        <div class="title">
          <div class="h2  title__highlight">Undergraduate Open Day</div>
        </div>
        <div class="title  title--bg-slate">
          <div class="h4  title__highlight">Saturday 28 March 2020 - Stoke-on-trent campus</div>
        </div>
        <div class="title  title--bg-white"><p class="title__highlight">Open days give you the best experience and insight to courses, people and facilities that interest you. Make your choice easier and come meet us.</p></div>
      </div>

      <div class="banner__cta">
        <a href="" class="button  button--caps">Book an open day - a long button title</a>
      </div>
    </div>
  </div>
</div>
  • Content: 
    .banner {
  position: relative;
  display: flex;
  min-height: 35vmin;
  margin-bottom: $spacing-xl;
  background: radial-gradient(45% 660% at 50% 50%, mix(#e3e3e3, white, 30%) 0%, mix(#ccc, white, 30%) 100%);

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

    img {
      height: 100%;
      width: 100%;
      object-position: center center;
      object-fit: cover;
      transform: scale(1.1);
      filter: blur(0.5em);

      @media (min-width: map-get($breakpoint-stages, 'tablet')) {
        transform: none;
        filter: none;
      }
    }

    &--blurred {
      @media (min-width: map-get($breakpoint-stages, 'tablet')) {
        img {
          transform: scale(1.1);
          filter: blur(0.5em);
        }
      }
    }
    &.video {
      padding-bottom: 50%;
      position: initial;
      iframe {
        width: 100%;
        height: 100%;
        position: absolute;       
      }
    }    
  }

  &__body {
    position: relative;
    align-self: flex-end;
    box-sizing: border-box;
    width: 100%;
    padding: calc(#{$spacing-sm} + 15%) calc(#{$spacing-sm} + 2.5%) calc(#{$spacing-sm} + 2.5%);
    z-index: 1;

    &--shallow {
      padding: calc(#{$spacing-xl} + 2.5%) calc(#{$spacing-sm} + 2.5%) calc(#{$spacing-sm} + 2.5%);
    }
  }

  .wrap {
    .banner__body {
      padding-left: 0;
      padding-right: 0;
    }
  }
}
  • URL: /components/raw/banner/_banner.scss
  • Filesystem Path: src/components/banner/_banner.scss
  • Size: 1.4 KB