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.

Content block

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

The content block provides a stylized two-column layout for content and a decorative image. Use this pattern when you want to showcase information with an image. This pattern is similar to the hero banner except it allows for longer content.

Layout variants

Columns can be set to one and two thirds, two and one thirds, and one half and one half. There are 6 variations of layouts.

One-third image column, two-thirds content column

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

Two-thirds image column, one-third content column

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

One-half image column, one-half content column

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

One-third content column, two-thirds image column

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

Two-thirds content column, one-third image column

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

One-half content column, one-half image column

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

Image height variants

The image can have 4 different heights: small, medium, large, or flexible. The small, medium, large variants are fixed heights set through CSS. The flexible height means the image will stretch vertically to match the height of the content column. This means the image will always be 100% height of the entire content block.

Small image height

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ante eu dui porttitor mollis. Nam elementum diam eget posuere tincidunt. Nulla ut fringilla arcu. Praesent eget convallis mi. Praesent lobortis convallis erat sed tempor.

Example CTA

Medium image height

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ante eu dui porttitor mollis. Nam elementum diam eget posuere tincidunt. Nulla ut fringilla arcu. Praesent eget convallis mi. Praesent lobortis convallis erat sed tempor.

Example CTA

Large image height

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ante eu dui porttitor mollis. Nam elementum diam eget posuere tincidunt. Nulla ut fringilla arcu. Praesent eget convallis mi. Praesent lobortis convallis erat sed tempor.

Example CTA

Flexible image height

The flexible image matches the height of the content column. The image will have a minimum height of 360px or 36rem for visual balance.

Flexible image height with a medium amount of content

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

Flexible image height with a longer amount of content

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ante eu dui porttitor mollis. Nam elementum diam eget posuere tincidunt. Nulla ut fringilla arcu. Praesent eget convallis mi. Praesent lobortis convallis erat sed tempor.

Example CTA

Theme colour variants

There are 3 theme variants available: medium (default), light, and transparent.

Medium theme (default)

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

Light theme

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

Transparent theme

Example title lorem ipsum neque porro quisquam est

Lorem ipsum dolor

Example content neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem. Neque porro quisquam est qui dolorem ipsum, neque porro quisquam est qui dolorem.

Example CTA

Code

Fixed image height:

Code 


<!-- NOTE: For fixed height background-images, add a sizing class: `sm`, `md`, or `lg`
to the `<div class="background-image">` element to set the fixed height -->

<!-- 1/3 fixed height image, 2/3 content -->
<div class="content-block-flex row no-gutters fixed-image-height">
    <div class="content-block-media col-sm-6 col-md-4">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
    <div class="content-block-body col-sm-6 col-md-8">
        ...
    </div>
</div>

<!-- 2/3 fixed height image, 1/3 content -->
<div class="content-block-flex row no-gutters fixed-image-height">
    <div class="content-block-media col-sm-6 col-md-8">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
    <div class="content-block-body col-sm-6 col-md-4">
        ...
    </div>
</div>

<!-- 1/2 fixed height image, 1/2 content -->
<div class="content-block-flex row no-gutters fixed-image-height">
    <div class="content-block-media col-sm-6">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
    <div class="content-block-body col-sm-6">
        ...
    </div>
</div>

<!-- 2/3 content, 1/3 fixed height image -->
<div class="content-block-flex row no-gutters fixed-image-height">
    <div class="content-block-body col-sm-6 col-md-8">
        ...
    </div>
    <div class="content-block-media col-sm-6 col-md-4">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
</div>

<!-- 1/3 content, 2/3 fixed height image -->
<div class="content-block-flex row no-gutters fixed-image-height">
    <div class="content-block-body col-sm-6 col-md-4">
        ...
    </div>
    <div class="content-block-media col-sm-6 col-md-8">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
</div>

<!-- 1/2 content, 1/2 fixed height image -->
<div class="content-block-flex row no-gutters fixed-image-height">
    <div class="content-block-body col-sm-6">
        ...
    </div>
    <div class="content-block-media col-sm-6">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
</div>

Flexible image height:

Code 


<!-- 1/3 flexible height image, 2/3 content -->
<div class="content-block-flex row no-gutters flexible-image-height">
    <div class="content-block-media col-sm-6 col-md-4">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
    <div class="content-block-body col-sm-6 col-md-8">
        ...
    </div>
</div>

<!-- 2/3 flexible height image, 1/3 content -->
<div class="content-block-flex row no-gutters flexible-image-height">
    <div class="content-block-media col-sm-6 col-md-8">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
    <div class="content-block-body col-sm-6 col-md-4">
        ...
    </div>
</div>

<!-- 1/2 flexible height image, 1/2 content -->
<div class="content-block-flex row no-gutters flexible-image-height">
    <div class="content-block-media col-sm-6">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
    <div class="content-block-body col-sm-6">
        ...
    </div>
</div>

<!-- 2/3 content, 1/3 flexible height image -->
<div class="content-block-flex row no-gutters flexible-image-height">
    <div class="content-block-body col-sm-6 col-md-8">
        ...
    </div>
    <div class="content-block-media col-sm-6 col-md-4">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
</div>

<!-- 1/3 content, 2/3 flexible height image -->
<div class="content-block-flex row no-gutters flexible-image-height">
    <div class="content-block-body col-sm-6 col-md-4">
        ...
    </div>
    <div class="content-block-media col-sm-6 col-md-8">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
</div>

<!-- 1/2 content, 1/2 flexible height image -->
<div class="content-block-flex row no-gutters flexible-image-height">
    <div class="content-block-body col-sm-6">
        ...
    </div>
    <div class="content-block-media col-sm-6">
        <img class="mobile-image" src="image.jpg" alt="">
        <div class="background-image" style="background-image: url( 'image.jpg' );"></div>
    </div>
</div>