Content block

A content block consists of a stylized two-column layout for content and a decorative image, displayed side by side horizontally across the page.

It showcases information along with longer content (than a hero banner), making the display of different types of information scannable.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a content block supports.

Select column order:

Select column widths:

Select theme:

Enable first CTA button:

Enable second CTA button:

Select image height:

Select image size:

Select image position X:

Select image position Y:

Content block title

Content block subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Call to action 1 Call to action 2

Code

Responsive preview

Usage best practices

Column widths can be set to:

one and two thirds
two and one thirds
one half and one half

The image and content column positions may also be switched. This results in six different layout options.

Image heights in content block:

small
medium
large
flexible - image stretches vertically to fill the content block container

The content block can also be configured without an image where it becomes a container for other components and can have either a white or grey background theme. White theme has a border.

Multiple content blocks can be used on the same page.

Do

Use high quality images which can scale to fit various heights.

Don't

Do not use the primary button more than once when multiple content block components are used on the same page.