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.5)

Note

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

Hero banner

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

Hero banner

White background

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris



Black background

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris



Left-aligned

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris



Right-aligned

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris



Code 


<!-- Switch the background colour of the cta-background element by applying the classes:
'coc-black-opacity' or 'coc-white-opacity' -->

<!-- Align the cta-background element left or right by applying the classes:
'cta-left' or 'cta-right'. By default, the cta-background element is center-aligned. -->

<!-- Hero banner with white CTA -->
<div class="cui coc-jumbotron">
    <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    <div class="cta-background coc-white-opacity">
        <h1>Nulla vitae elit libero</h1>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris</p>
    </div>
</div>

<!-- Hero banner with black CTA -->
<div class="cui coc-jumbotron">
    <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    <div class="cta-background coc-black-opacity">
        <h1>Nulla vitae elit libero</h1>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris</p>
    </div>
</div>

<!-- Hero banner with white CTA, left-aligned -->
<div class="cui coc-jumbotron">
    <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    <div class="cta-background coc-white-opacity cta-left">
        <h1>Nulla vitae elit libero</h1>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris</p>
    </div>
</div>

<!-- Hero banner with white CTA, right-aligned -->
<div class="cui coc-jumbotron">
    <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    <div class="cta-background coc-white-opacity cta-right">
        <h1>Nulla vitae elit libero</h1>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris</p>
    </div>
</div>

Usage

A hero banner serves as a dominant element and consists of a strong image working in conjunction with the main headline. It should communicate the primary message quickly.

Please DO

  • Use high quality images which can scale to fit numerous screen sizes and aspect ratios
  • Review your Google Analytics to determine the screen resolution of your typical visitors to appropriately select the optimal image size of your image
  • Consider the point from which the scaling will occur when using hero images
  • Consider using sticky elements along the base of the hero image to ensure certain key points are kept above the fold
  • Consider the effect of a hero image on mobile experience (vertical and horizontal orientation)

Please DON'T

  • Use tightly cropped original source photos
  • Use any photography effects on banner images

Image size

Normal Resolution: 1280px x 350px (Naming convention for image: filenameofimage.jpg)

Retina display: 2560px x 700px (Naming convention for image: filenameofimage_2x.jpg)

Accessibility

The background div behind the text provides colour separation between the banner text and background image.


Hero banner with CTA button
Production Ready SharePoint Available

For the main call to action element in a hero banner, use a single large primary button.

White background

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris

Large primary


Black background

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris

Large primary


White background, left aligned

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris

Large primary


Black background, right aligned

Nulla vitae elit libero

Fusce dapibus, tellus ac cursus commodo, tortor mauris

Large primary

Code 


<!-- Switch the background colour of the cta-background element by applying the classes:
'coc-black-opacity' or 'coc-white-opacity' -->

<!-- Align the cta-background element left or right by applying the classes:
'cta-left' or 'cta-right'. By default, the cta-background element is center-aligned. -->

<!-- Hero Banner with CTA Button -->
<div class="cui coc-jumbotron">
    <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    <div class="cta-background coc-white-opacity">
        <h1>Nulla vitae elit libero</h1>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris</p>
        <a href="" class="cui btn-lg primary">Large primary</a>
    </div>
</div>

Usage

A hero banner serves as a dominant element and consists of a strong image working in conjunction with the main headline. It should communicate the primary message quickly.

Please DO

  • Use high quality images which can scale to fit numerous screen sizes and aspect ratios
  • Review your Google Analytics to determine the screen resolution of your typical visitors to appropriately select the optimal image size of your image
  • Consider the point from which the scaling will occur when using hero images
  • Consider using sticky elements along the base of the hero image to ensure certain key points are kept above the fold
  • Consider the effect of a hero image on mobile experience (vertical and horizontal orientation)

Please DON'T

  • Use tightly cropped original source photos
  • Use any photography effects on banner images

Image size

Normal Resolution: 1280px x 350px (Naming convention for image: filenameofimage.jpg)

Retina display: 2560px x 700px (Naming convention for image: filenameofimage_2x.jpg)

Hero banner with text label
Beta

This variation of the hero banner includes styling for the label text, which is positioned at the bottom left corner.

Neque porro
qui dolore qui

Code 


<div class="cui coc-jumbotron-banner-bg-img" style="background-image: url( 'image.jpg' );">
    <p class="h2">
        <span>Neque porro</span>
        <br>
        <span>qui dolore qui </span>
    </p>
</div>

Usage

Use the hero banner with text to provide additional visual information to users about the content on the page. For the main CTA in a Hero Banner use the large primary button.

Please DO

  • Ensure that the banner text provides information the topic
  • Ensure the image choice relates to the topic for which the banner will be used
  • Limit banner text as per character limitation below

Please DON'T

  • Write long sentences for text and label
  • Embed text into image


Image use example

Please DO

  • Recycling topic - image of blue cart recycling

Please DON'T

  • Recycling topic - generic image of the City skyline

Character limitation

Text is limited to 2 lines.

Character limitation for each line will be

  • screen size < = 544px :10
  • screen size > 544px :20

Image size

Normal Resolution: 1280px x 350px (Naming convention for image: filenameofimage.jpg)

Retina display: 2560px x 700px (Naming convention for image: filenameofimage_2x.jpg)