Banners & Carousels

Banners have carousel functionality. We use the carousel library 'Flickity'.  You will need to include the Flickity CSS in the head of your document and the Flickity JS near the end of the body of your document as indicated in the code below. <!-- Flickity CSS --> <link rel="stylesheet" href="//unpkg.com/flickity@2/dist/flickity.min.css"> <!-- Flickity JS --> <script src="//unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Please note: Rendered elements below may look different when used elsewhere. These elements are full width, and any text/links used on banners will fit according to page max-width, rather than being constrained to a testing area as seen below

Hero Banner

Our hero banner has multiple options for slides and the ability for text content to drop below the image on mobile.

Minimum recommended image size is: 1400 × 600

  1. Aligned Left Option (text drops below image on mobile)
  2. Aligned Right Option (text drops below image on mobile)
  3. Aligned Center Option (text drops below image on mobile)
  4. Text Stays Within Image Option
  5. Image Only
Photo of McMaster Univesrity Campus with Students Sitting on Field
McMaster University Brighter World Logo
Photo of Students sitting beside William McMaster Sculpture

Aligned Right Option

Button Test
Photo of McMaster Campus Building

Aligned Left Option

Button Test
Statue of William McMaster Sitting on bench

Align Center Option

Button Test
Statue of William McMaster Sitting on bench

Does Not Drop on Mobile

images should be 1400x600 or higher in 21:9 ratio 
  <!-- Flickity CSS -->
  <link rel="stylesheet" href="//unpkg.com/flickity@2/dist/flickity.min.css">
  <!-- Hero Banner -->
<banner>
    <div class="hero-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "adaptiveHeight": true }'>
<div class="carousel-cell">
        <img src="https://source.unsplash.com/random/1400x600" alt="Photo of McMaster Univesrity Campus with Students Sitting on Field" class="carousel-bg carousel-bg-faded">
        <div class="cell-container"></div>
        <div class="container-fluid pt-4 pb-5">
          <div class="row">
            <div class="col-10 mx-auto">
              <div class="row carousel-limiter mx-auto">
                <div class="col-lg-12 mx-auto carousel-text text-center">
                  <img src="https://brand.mcmaster.ca/app/uploads/2019/04/mcm-bw-rev.png" alt="McMaster University Brighter World Logo" class="img-fluid">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    <div class="carousel-cell drop">
<img src="https://brand.mcmaster.ca/app/uploads/2019/04/bg-1.jpg" alt=" Photo of Students sitting beside William McMaster Sculpture" class="carousel-bg">
      <div class="cell-container circle-mask circle-mask-right"></div>
      <div class="container-fluid pt-4 pb-5">
        <div class="row">
          <div class="col-10 mx-auto">
            <div class="row carousel-limiter ml-auto">
              <div class="col-lg-6 ml-auto carousel-text text-lg-right">
                <h1 class="banner-title banner-title-lg">Aligned Right Option</h1>
                <p class="banner-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <a class="btn btn-primary btn-lg" href="">Button Test</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-cell drop">
             <img src="https://brand.mcmaster.ca/app/uploads/2019/04/bg-4.jpg" alt="Photo of McMaster Campus Building" class="carousel-bg">
      <div class="cell-container circle-mask circle-mask-left"></div>
      <div class="container-fluid pt-4 pb-5">
        <div class="row">
          <div class="col-10 mx-auto">
            <div class="row carousel-limiter mr-auto">
              <div class="col-lg-6 mr-auto carousel-text text-lg-left">
                <h1 class="banner-title banner-title-lg">Aligned Left Option</h1>
                <p class="banner-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <a class="btn btn-primary btn-lg" href="">Button Test</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-cell drop">
      <img src="https://brand.mcmaster.ca/app/uploads/2019/04/bg-ourstory.jpg" alt="Statue of William McMaster Sitting on bench" class="carousel-bg carousel-bg-faded">
      <div class="cell-container"></div>
      <div class="container-fluid pt-4 pb-5">
        <div class="row">
          <div class="col-10 mx-auto">
            <div class="row carousel-limiter mx-auto">
              <div class="col-lg-12 mx-auto carousel-text text-lg-center">
                <h1 class="banner-title banner-title-lg banner-title-line banner-text-rev">Align Center Option</h1>
                <p class="banner-text banner-text-rev">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <a class="btn btn-secondary btn-lg" href="">Button Test</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-cell">
      <img src="https://brand.mcmaster.ca/app/uploads/2019/04/bg-ourstory.jpg" alt="Statue of William McMaster Sitting on bench" class="carousel-bg carousel-bg-faded">
      <div class="cell-container"></div>
      <div class="container-fluid pt-4 pb-5">
        <div class="row">
          <div class="col-10 mx-auto">
            <div class="row carousel-limiter mx-auto">
              <div class="col-lg-12 mx-auto carousel-text text-center">
                <h1 class="banner-title banner-title-lg banner-title-line banner-text-rev">Does Not Drop on Mobile</h1>
                  <p class="banner-text banner-text-rev">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-cell duotone">
      <div class="cell-container"></div>
      <img src="https://source.unsplash.com/random/1400x600" class="carousel-bg" alt="images should be 1400x600 or higher in 21:9 ratio" >
    </div>
  </div>
  </banner>
  <!-- Flickity JS -->
  <script src="//unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Advertisement Banner

Advertisement Banners are great callouts to breakout your page.

Minimum recommended image size is: 1200 × 1050 (to support stacked layout on mobile)

 

<banner>
    <div class="banner-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "adaptiveHeight": true, "pageDots": false, "autoPlay": 6000, "wrapAround":true }'>
      <div class="carousel-cell">
        <img src="https://brand.mcmaster.ca/app/uploads/2019/04/bg-ad-creative.jpg" alt="Photo of Laptop" class="carousel-bg carousel-bg-faded">
        <div class="container-fluid py-5">
          <div class="row">
            <div class="col-10 mx-auto">
              <div class="row mx-auto align-items-center">
                <div class="col-lg-3 text-lg-right py-2 pr-4">
                  <h1 class="banner-title my-0 banner-text-rev">Need Design Help?</h1>
                </div>
                <div class="col-lg-6 py-2"><p class="banner-text banner-text-rev my-0">Bring your vision to life with new Brighter World branding. Our creative design, web and printing services are here to help. Contact Media Production Services at <a href="mailto:mps@mcmaster.ca?subject=Creative Services Request">mps@mcmaster.ca</a>.</p></div>
                 <div class="col-lg-3 text-lg-right py-2"><a class="btn btn-secondary" href="mailto:mps@mcmaster.ca?subject=Creative Services Request">Request Creative Services</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-cell">
        <img src="https://brand.mcmaster.ca/app/uploads/2021/07/bg-ad-feedback.jpg" alt="Photo of Lightbulb" class="carousel-bg carousel-bg-faded">
        <div class="container-fluid py-5">
          <div class="row">
            <div class="col-10 mx-auto">
              <div class="row mx-auto align-items-center">
                <div class="col-lg-3 text-lg-right py-2 pr-4">
                  <h1 class="banner-title my-0 banner-text-rev">GOT A BRAND QUESTION?</h1>
                </div>
                <div class="col-lg-6 py-2"><p class="banner-text banner-text-rev my-0">Do you have a question or feedback about working with our brand? Contact <a href="mailto:brandmarketing@mcmaster.ca?subject=Brand Guidelines Feedback">brandmarketing@mcmaster.ca</a>.</p></div>
                 <div class="col-lg-3 text-lg-right py-2"><a class="btn btn-secondary" href="mailto:brandmarketing@mcmaster.ca?subject=Brand Guidelines Feedback">Send us your Feedback</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </banner>

Notification Banner

Description

<banner>
    <div class="banner-carousel" data-flickity='{ "cellAlign": "left", "contain": true, "adaptiveHeight": true, "pageDots": false }'>
      <div class="carousel-cell gold">
        <div class="container-fluid py-3">
          <div class="row">
            <div class="col-10 mx-auto">
              <div class="row mx-auto align-items-center">
                <div class="col-lg-3 text-lg-right py-2">
                  <h1 class="banner-title my-0">Text Right Banner</h1>
                </div>
                <div class="col-lg-6 py-2"><p class="banner-text my-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ligula eu ex ultrices, vitae suscipit urna condimentum.</p></div>
                 <div class="col-lg-3 text-lg-right py-2"><a class="btn btn-info my-0" href="">Learn More</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-cell gold">
        <div class="container-fluid py-3">
          <div class="row">
            <div class="col-10 mx-auto">
              <div class="row mx-auto align-items-center">
                <div class="col-lg-3 text-lg-right py-2">
                  <h1 class="banner-title my-0">Text Right Banner</h1>
                </div>
                <div class="col-lg-6 py-2"><p class="banner-text my-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ligula eu ex ultrices, vitae suscipit urna condimentum.</p></div>
                 <div class="col-lg-3 text-lg-right py-2"><a class="btn btn-info my-0" href="">Learn More</a></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </banner>

Card Carousel

You can feature multiple cards on a carousel as well.

Card image cap

Card Title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Another link
Card image cap

Card Title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Another link
Card image cap

Card Title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Another link
Card image cap

Card Title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Another link
Card image cap

Card Title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Another link
Card image cap

Card Title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Another link 
<banner>
   <div class="container-fluid py-5 cool-grey">
     <div class="row">
       <div class="col-10 mx-auto">
         <div class="flickity-carousel multi-carousel multi-carousel-eq-height" data-flickity='{ "cellAlign": "left", "contain": true, "groupCells": true }'>
          <div class="col-xl-4 col-lg-6 carousel-cell">
            <div class="card">
                    <div class="card-img-mask card-img-mask-top">
                      <img src="https://brand.mcmaster.ca/wp-content/images/img-sample.jpg" alt="Card image cap">
                    </div>
                    <div class="card-body">
                      <h3 class="card-title">Card Title</h3>
                      <h4 class="card-subtitle">Card subtitle</h4>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                      <a href="#" class="card-link">Another link</a>
                    </div>
                  </div>
          </div>
          <div class="col-xl-4 col-lg-6 carousel-cell">
            <div class="card">
                    <div class="card-img-mask card-img-mask-top">
                      <img src="https://brand.mcmaster.ca/wp-content/images/img-sample.jpg" alt="Card image cap">
                    </div>
                    <div class="card-body">
                      <h3 class="card-title">Card Title</h3>
                      <h4 class="card-subtitle">Card subtitle</h4>
                     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                      <a href="#" class="card-link">Another link</a>
                    </div>
                  </div>
          </div>
          <div class="col-xl-4 col-lg-6 carousel-cell">
            <div class="card">
                    <div class="card-img-mask card-img-mask-top">
                      <img src="https://brand.mcmaster.ca/wp-content/images/img-sample.jpg" alt="Card image cap">
                    </div>
                    <div class="card-body">
                      <h3 class="card-title">Card Title</h3>
                      <h4 class="card-subtitle">Card subtitle</h4>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                      <a href="#" class="card-link">Another link</a>
                    </div>
                  </div>
          </div>
          <div class="col-xl-4 col-lg-6 carousel-cell">
            <div class="card">
                    <div class="card-img-mask card-img-mask-top">
                      <img src="https://brand.mcmaster.ca/wp-content/images/img-sample.jpg" alt="Card image cap">
                    </div>
                    <div class="card-body">
                      <h3 class="card-title">Card Title</h3>
                      <h4 class="card-subtitle">Card subtitle</h4>
                     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                      <a href="#" class="card-link">Another link</a>
                    </div>
                  </div>
          </div>
          <div class="col-xl-4 col-lg-6 carousel-cell">
            <div class="card">
                    <div class="card-img-mask card-img-mask-top">
                      <img src="https://brand.mcmaster.ca/wp-content/images/img-sample.jpg" alt="Card image cap">
                    </div>
                    <div class="card-body">
                      <h3 class="card-title">Card Title</h3>
                      <h4 class="card-subtitle">Card subtitle</h4>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                      <a href="#" class="card-link">Another link</a>
                    </div>
                  </div>
          </div>
          <div class="col-xl-4 col-lg-6 carousel-cell">
            <div class="card">
                    <div class="card-img-mask card-img-mask-top">
                      <img src="https://brand.mcmaster.ca/wp-content/images/img-sample.jpg" alt="Card image cap">
                    </div>
                    <div class="card-body">
                      <h3 class="card-title">Card Title</h3>
                      <h4 class="card-subtitle">Card subtitle</h4>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. </p>
                      <a href="#" class="card-link">Another link</a>
                    </div>
                  </div>
          </div>
         </div>
       </div>
     </div>
   </div>
  </banner>