Grid banner

Grid banner with images

Demo

<div class="cui b-grid-section">
    <!-- 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 }}</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 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">
    <!-- 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.