Icon subject layout

The icon subject layout pattern allows room for longer form content and to display a series of related content.

The supplementary icon on the left side makes the text more scannable and interesting to the eyes as well as can help with accessibility when language is a barrier for certain users.

Component data

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

Functional grouping: Containers


Configure: select the dropdowns below to display the variety of options that an icon subject layout supports.


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.



Responsive preview

Usage best practices

Choose the icon subject layout in instances where icon offers supplementary information to the remaining content. It incorporates:

  • an icon
  • a title
  • body text
  • background colour (preset with neutral colours) 

The icon is positioned on the left side of the content and can be aligned with the title or centered on the body. The icon offers two sizes:

  • font icon (up to 32px)
  • an SVG illustration (up to 128px)

Consider the relative size of an icon compared to other visual elements presented on the screen. Generally on desktops and larger tablets the icon will look less salient than on a mobile screen.


Use recognizable and relevant icons.