The banner block acts as the first prominent visual a visitor sees on a page, and at a minimum, should include an H1 that acts as the page title. Other options available in the banner block are breadcrumb navigation, call to action buttons, and hero images.

Base Banner

At its bare minimum, the Banner block displays the page's <h1> title.

<div class="u-block u-block--grey">
    <div class="b-banner">
        <section>
            <h1>Base Banner</h1>
        </section>
    </div>
</div>

Block details

Banner block meta	values
handle	banner
options examples	breadcrumbs, CTA button, CTA buttons
colour options	u-block--grey
section use	<header>
width type	fixed-row
has heading	n/a
theme(s)	CU
variants	Hero image
Codepen	https://codepen.io/cuweb/pen/PMQEmz?editors=1000

Properties

Props	Desc	Type	Default
breadcrumbs	breadcrumb array to loop over	array	-
img	url for css background image	string	-
imgOpacity	img overlay opacity, options: dark, light	string	-
imgPosition	img position, options: top, bottom	string	-
title *	Main page title <h1>	string	-

* = required.

Banner with breadcrumbs

For websites that have a lot of pages, enhance the way users find their way around by adding breadcrumb navigation. Breadcrumbs indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

<div class="u-block u-block--grey">
    <div class="b-banner">
        <section>
            <nav aria-label="breadcrumb">
                <ol itemscope itemtype="http://schema.org/BreadcrumbList">
                    <li itemprop="breadcrumb"><a href="">Home</a></li>
                    <li itemprop="breadcrumb"><a href="../../">Blocks</a></li>
                    <li itemprop="breadcrumb"><a href="../">Banners</a></li>
                    <li class="u-visually-hidden" itemprop="breadcrumb" aria-current="page">Banner with Breadcrumbs</li>
                </ol>
            </nav>
            <h1>Banner with Breadcrumbs</h1>
        </section>
    </div>
</div>

Note: that the current page (aria-current="page") is included in the breadcrumb trail but is visually hidden.

Banner with CTA button

Call to action buttons can be added to banner using the button cta component.

<div class="u-block u-block--grey">
    <div class="b-banner">
        <section>
            <nav aria-label="breadcrumb">
                <ol itemscope itemtype="http://schema.org/BreadcrumbList">
                    <li itemprop="breadcrumb"><a href="">Home</a></li>
                    <li itemprop="breadcrumb"><a href="../../">Blocks</a></li>
                    <li itemprop="breadcrumb"><a href="../">Banners</a></li>
                    <li class="u-visually-hidden" itemprop="breadcrumb" aria-current="page">Banner with a CTA Button</li>
                </ol>
            </nav>
            <h1>Banner with a CTA Button</h1>
            <p>
                <a class="c-buttoncta" href="https://writtent.com/blog/15-call-action-samples-rocking-blog-posts-convert/" role="button">Learn about Calls to Action</a>
            </p>
        </section>
    </div>
</div>

Banner with multiple buttons

You can add up to two CTA buttons by using the example below.

<div class="u-block u-block--grey">
    <div class="b-banner">
        <section>
            <h1>Banner with multiple CTA buttons</h1>
            <p>
                <a class="c-buttoncta" href="https://www.youtube.com/watch?v=lrYPm6DD44M" role="button">Learn about Ravens</a>
                <a class="c-buttoncta" href="http://www.nooooooooooooooo.com" role="button">Join the Dark Side</a>
            </p>
        </section>
    </div>
</div>

Hero image banner

Because people are highly visual, having high quality imagery at the top of your page can help create a positive first impression.

<style>
    .b-banner--img {
        background-image: url(https://cu-raven.s3.amazonaws.com/assets/img/photos/nevermore.jpg);
    }
</style>
<div class="u-block u-block--black u-block--full ">
    <div class="b-banner b-banner--img">
        <section>
            <h1>Hero image banner</h1>
            <p>
                <a class="c-buttoncta" href="https://uxplanet.org/best-practices-for-hero-images-eeb234b664d6" role="button">Learn about Hero Images</a>
            </p>
        </section>
    </div>
</div>

Image size

Banner images are 1600px in width by 700px in height.

Banner image position and brightness

Banner brightness

By default, banner images have a dark transparent overlay covering them to make reading the title text easier. Depending on the original brightness of the image, you may want to darken or lighten the overlay.

• To lighten an banner image, add the modifier: b-banner--img-light.
• To darken a banner image, add the modifier: b-banner--img-dark.

Banner image position

By default banner images are centered to the container. Depending on the image and the required text, you might want to art-direct the images position.

• To align an image to the bottom, add the modifier: b-banner--img-bottom.
• To align an image to the top, add the modifier: b-banner--img-top.

Hero image darkened and aligned to the bottom

<style>
    .b-banner--img {
        background-image: url(https://cu-raven.s3.amazonaws.com/assets/img/photos/nevermore.jpg);
    }
</style>
<div class="u-block u-block--black u-block--full ">
    <div class="b-banner b-banner--img b-banner--img-dark b-banner--img-bottom">
        <section>
            <h1>Hero image darkened and aligned to the bottom</h1>
        </section>
    </div>
</div>

Hero image lightened and aligned to the top

<style>
    .b-banner--img {
        background-image: url(https://cu-raven.s3.amazonaws.com/assets/img/photos/nevermore.jpg);
    }
</style>
<div class="u-block u-block--black u-block--full ">
    <div class="b-banner b-banner--img b-banner--img-light b-banner--img-top">
        <section>
            <h1>Hero Image lightened and aligned to the top</h1>
        </section>
    </div>
</div>

Implementation Notes

• Use only one banner per page. This page obviously breaks this rule but it is an anomaly in order document all the available banners and their options.
• Banners must reside in the <header> section.
• Banner images are 1600px in width by 700px in height.

Content guidelines

• For hero image banners, ask yourself whether or not the image you’ve selected actually adds value. If your image is unoriginal or doesn't compliment your content, consider not using one.
• Make sure the title text is readable. Banner images should not have text on them and they should be darkened enough so that it is easy to read the page title. The page title is the most important element in the banner. Photos are used as secondary background images and are not crucial to the banner content.
• Avoid using banner images with any text on them. All text should be in the HTML itself.

References

https://www.optimizely.com/optimization-glossary/hero-image/