Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.8)

Note

This page is archived under version 1.8 and is available for reference purposes only. The latest version of Pattern Library is 2.

Grid banner

Global files
  1. coc-basic-style.css
  2. cicon-package.zip
  3. bootstrap-grid.css (4.4.1)
Pattern files
  1. coc-banner-grid.css

The grid banner pattern serves as a dominant visual element of the page containing call to action links or videos.

Grid banner with images

Demo

Example title lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Call to action

Quisque ac nulla pharetra tempus mi at bibendum pretium

Call to action

Quisque ac nulla pharetra tempus mi at bibendum pretium

Call to action

Code 


<div class="cui b-grid-section {{ extended }}">
    <!-- Main column -->
    <div class="main-container">
        <div class="b-grid-item">
            <div class="background-image" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
            <div class="b-grid-item-content {{ coc-black-opacity | coc-white-opacity }}">
                <h2 class="b-grid-item-title">{{ Title }}</h2>
                <p>{{ Content }}</p>
                <a class="cui btn-md primary" href="{{ URL }}">
                	{{ Call to action }}
                	<span class="cicon-angle-right right" aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </div>
    <!-- Side column -->
    <div class="side-container">
        <div class="b-grid-item">
            <div class="background-image" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' ); ?>' );"></div>
            <div class="b-grid-item-content {{ coc-black-opacity | coc-white-opacity }}">
                <h2 class="b-grid-item-title">{{ Title }}</h2>
                <a href="{{ URL }}">{{ Call to action }}</a>
            </div>
        </div>
        <div class="b-grid-item">
            <div class="background-image" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
            <div class="b-grid-item-content {{ coc-black-opacity | coc-white-opacity }}">
                <h2 class="b-grid-item-title">{{ Title }}</h2>
                <a href="{{ URL }}">{{ Call to action }}</a>
            </div>
        </div>
    </div>
</div>

Grid banner with videos and images

In this variant, any combination of the three grid items may be converted to video containers. When the video container is clicked, the video will display and play. There should not be any call to action links in the video container grid item as the main purpose of the element is to play the video.

Demo

Example title lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Quisque ac nulla pharetra tempus mi at bibendum pretium

Quisque ac nulla pharetra tempus mi at bibendum pretium

Call to action

Code 


<!-- Example javascript to play the video when the thumbnail is clicked -->
<script>
    $( document ).ready( function() {
        $( '.video-container .btn-video' ).on( 'click', function() {
            var iframe = $( this ).siblings( 'iframe' );
            var videoSrc = iframe.attr( 'data-src' ) + '?autoplay=1';
            $( this ).hide().parents( '.video-container' ).css( 'z-index', 10 );
            iframe.attr( 'src', videoSrc ).show();
        });
    });
</script>
<div class="cui b-grid-section {{ extended }}">
    <!-- Main column -->
    <div class="main-container">
        <div class="b-grid-item">
            <div class="video-container">
                <button class="btn-video" aria-label="Play video">
                    <span class="video-thumbnail" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></span>
                </button>
                <iframe allowfullscreen data-src="{{ Youtube embed URL }}"></iframe>
            </div>
            <div class="b-grid-item-content {{ coc-black-opacity | coc-white-opacity }}">
                <h2 class="b-grid-item-title">{{ Title }}</h2>
                <p>{{ Content }}</p>
            </div>
        </div>
    </div>
    <!-- Side column -->
    <div class="side-container">
        <div class="b-grid-item">
            <div class="video-container">
                <button class="btn-video" aria-label="Play video">
                    <span class="video-thumbnail" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></span>
                </button>
                <iframe allowfullscreen data-src="{{ Youtube embed URL }}"></iframe>
            </div>
            <div class="b-grid-item-content {{ coc-black-opacity | coc-white-opacity }}">
                <h2 class="b-grid-item-title">{{ Title }}</h2>
            </div>
        </div>
        <div class="b-grid-item">
            <div class="background-image" style="background-image: url( '{{ Image URL (e.g. image.jpg) }}' );"></div>
            <div class="b-grid-item-content {{ coc-black-opacity | coc-white-opacity }}">
                <h2 class="b-grid-item-title">{{ Title }}</h2>
                <a href="{{ URL }}">{{ Call to action }}</a>
            </div>
        </div>
    </div>
</div>

Usage

General guidelines

Rules

  • Grid banners are composed of three grid items composed of a high quality background image, a heading, and a short description (for the main area only).
  • Grid banners should be placed at the top of the page beneath the navigation.
  • All grid items with static images require one call to action link inside the content area. For grid items with videos, do not include any call to action in the content area as the only action available will be to watch the video.

Text guidelines

Recommended character limits

Character limits should be placed on the content to ensure the pattern does not look visually cluttered. Below are recommended limits.

  • Main column
    • Title: 50-60 characters
    • Content: 100-120 characters
  • Side column
    • Title: 50-60 characters
Please DO
  • Use the recommended character limits above.
  • Use only one call to action link or button per grid item.
  • Add a short description to the main grid item.
Please DON’T
  • Do not exceed the text character limits to prevent breaking the layout.
  • Do not use a call to action link or button in conjunction with a video grid item.
  • Do not add a description for the side grid items.

Background image template

A background image template is available to guide the placement of the image’s focal point. This ensures the image is displayed properly when the pattern is viewed across various screen sizes.

Background image template files are available upon request.