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

Note

This page is archived under version 1.6 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 with CTA

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

Demo

Use the select boxes below to see the available configurations.

Title consectetur adipiscing elit

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large primary

Code 


<!--
The following modifier classes may be applied to the `cta-background` element.

Background colour:
- Use the class `coc-white-opacity` for a transparent white background
- Use the class `coc-black-opacity` for a transparent black background

Alignment:
- By default, the text alignment is centred
- Use the class `cta-left` to align the content box left
- Use the class `cta-right` to align the content box right
-->

<!-- 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>Title consectetur adipiscing elit</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Usage

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
Please DON’T
  • Use tightly cropped original source photos
  • Use any photography effects on banner images
  • Embed text into the image

Image size

The image should be at least 1280px by 350px.

Hero banner with text label

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.

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 the image

Character limit

Text is limited to 2 lines. For mobile optimization, the maximum number of characters per line is 15.

Image size

The image should be at least 1280px by 350px.