Staffordshire University Components

Banner: No Image

There are no notes for this item.

<div class="banner">
    <div class="banner__body  banner__body--shallow">
        <div class="hgroup">
            <div class="title  title--bg-pink">
                <h1 class="h2  title__highlight">Banner: No Image</h1>
            </div>
            <div class="title  title--bg-white">
                <div class="h4  title__highlight">This banner has no image, and has some modifiers for colours applied.</div>
            </div>
        </div>

        <div class="banner__cta">
            <a href="" class="button  button--slate">Make a banner today</a>
        </div>
    </div>
</div>

<div class="grid  grid-2-cols@tablet">
    <div>

        <div class="banner">
            <div class="banner__body  banner__body--shallow">
                <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>
        <div class="banner">
            <div class="banner__body  banner__body--shallow">
                <div class="hgroup">
                    <div class="title">
                        <div class="h2  title__highlight">Undergraduate Open Day</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>
                </div>
            </div>
        </div>
    </div>
</div>

<hr />

<p>Consider reducing the h-size of any titles if placing a banner in a narrow column, place this size on the <code>title__highlight</code>.</p>

<div class="grid  grid-3-cols">
    <div>

        <div class="banner">
            <div class="banner__body  banner__body--shallow">
                <div class="hgroup">
                    <div class="title">
                        <div class="h4  title__highlight">Undergraduate Open Day</div>
                    </div>
                    <div class="title  title--bg-slate">
                        <div class="h5  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>
        <div class="banner">
            <div class="banner__body  banner__body--shallow">
                <div class="hgroup">
                    <div class="title">
                        <div class="h4  title__highlight">Sport</div>
                    </div>
                    <div class="title  title--bg-white">
                        <p class="title__highlight">Whether you're a competing athlete or a casual enthusiast, our thriving sporting community has something for you.</p>
                    </div>
                </div>

                <div class="banner__cta">
                    <a href="" class="button">Sport opportunities and facilities</a>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div class="banner">
            <div class="banner__body  banner__body--shallow">
                <div class="hgroup">
                    <div class="title">
                        <div class="h4  title__highlight">Undergraduate Open Day</div>
                    </div>
                </div>

                <div class="banner__cta">
                    <a href="" class="button  button--caps">Book an open day</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="banner  align-full">
    <div class="wrap">
        <div class="banner__body  banner__body--shallow">
            <div class="hgroup">
                <div class="title  title--bg-pink">
                    <h1 class="h2  title__highlight">Banner: No Image, Align Full</h1>
                </div>
                <div class="title  title--bg-white">
                    <div class="h4  title__highlight">This banner has no image, and has some modifiers for colours applied.</div>
                </div>
            </div>

            <div class="banner__cta">
                <a href="" class="button  button--slate">Make a banner today</a>
            </div>
        </div>
    </div>
</div>
 
<div class="banner">
  <div class="banner__body  banner__body--shallow">
    <div class="hgroup">
      <div class="title  title--bg-pink">
        <h1 class="h2  title__highlight">Banner: No Image</h1>
      </div>
      <div class="title  title--bg-white">
        <div class="h4  title__highlight">This banner has no image, and has some modifiers for colours applied.</div>
      </div>
    </div>

    <div class="banner__cta">
      <a href="" class="button  button--slate">Make a banner today</a>
    </div>
  </div>
</div>

<div class="grid  grid-2-cols@tablet">
  <div>

    <div class="banner">
      <div class="banner__body  banner__body--shallow">
        <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>
    <div class="banner">
      <div class="banner__body  banner__body--shallow">
        <div class="hgroup">
          <div class="title">
            <div class="h2  title__highlight">Undergraduate Open Day</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>
        </div>
      </div>
    </div>
  </div>
</div>

<hr/>

<p>Consider reducing the h-size of any titles if placing a banner in a narrow column, place this size on the <code>title__highlight</code>.</p>

<div class="grid  grid-3-cols">
  <div>

    <div class="banner">
      <div class="banner__body  banner__body--shallow">
        <div class="hgroup">
          <div class="title">
            <div class="h4  title__highlight">Undergraduate Open Day</div>
          </div>
          <div class="title  title--bg-slate">
            <div class="h5  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>
    <div class="banner">
      <div class="banner__body  banner__body--shallow">
        <div class="hgroup">
          <div class="title">
            <div class="h4  title__highlight">Sport</div>
          </div>
          <div class="title  title--bg-white"><p class="title__highlight">Whether you're a competing athlete or a casual enthusiast, our thriving sporting community has something for you.</p></div>
        </div>

        <div class="banner__cta">
          <a href="" class="button">Sport opportunities and facilities</a>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div class="banner">
      <div class="banner__body  banner__body--shallow">
        <div class="hgroup">
          <div class="title">
            <div class="h4  title__highlight">Undergraduate Open Day</div>
          </div>
        </div>

        <div class="banner__cta">
          <a href="" class="button  button--caps">Book an open day</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="banner  align-full">
  <div class="wrap">
    <div class="banner__body  banner__body--shallow">
      <div class="hgroup">
        <div class="title  title--bg-pink">
          <h1 class="h2  title__highlight">Banner: No Image, Align Full</h1>
        </div>
        <div class="title  title--bg-white">
          <div class="h4  title__highlight">This banner has no image, and has some modifiers for colours applied.</div>
        </div>
      </div>

      <div class="banner__cta">
        <a href="" class="button  button--slate">Make a banner today</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