The hero component is a large promotional section that brings the user's attention to prioritized content. It can be used to promininently display just an image, and image with a caption, or just a caption.


All heroes are wrapped in a .cwf-hero element. If only caption text is provided, it will contain a .cwf-hero__content div with a .cwf-hero__caption div inside it. If only an image is provided, an optional, blurred .cwf-hero__background image will show up behind the main .cwf-hero__image image contained within a .cwf-hero__content. When an image and caption are used, its a combination of the previous two structures but using figure and figcaption elements instead of divs.

Floating captions

By default, captions will be displayed below an image; This is useful for and should be used when horizontal space is limited, such as inside the sidebar. To make a hero's captions float, add a .cwf-hero--floating-captions modifier to the wrapping element. Floating will be automatically be disabled when the viewport is too small.

Caption alignment

By default, floating captions will show up at the bottom center of a hero's content area. There are 3 wrapping element modifiers that can adjust this:

  1. .cwf-hero--caption-left - Moves the caption horizontally to the left
  2. .cwf-hero--caption-right - Moves the caption horizontally to the right
  3. .cwf-hero--caption-top - Moves the caption vertically to the top

Horizontal and vertical caption alignment modifiers can be used in tandem to place the caption in 6 distinct areas of a hero's content.

Blurred caption background

If a caption appears less readable due to the image it sits on top of, you can add a .cwf-hero--caption-blur modifier to the wrapping element to give the caption a frosted-glass appearance. At the time of writing, this option does not work in all browsers supported by Compass.


There is no hero specific javascript included.

T4 implementation

Heroes are implement in T4 as the "Hero" plugin, meanining its classes are .plugin- prefixed instead of .cwf- prefixed.

When using the hero plugin in the sidebar area, the floating captions layout will be disabled, meaning the caption will site below the image.


In the "Name" field of the "Hero" plugin, the following case-insensitive keywords can be used to change the area in which the hero appears:

This plugin can also be used within the global "Site-Feature", "Site-Sidebar", and "Site-Footer" sections to have it displayed globally within the feature, sidebar, and footer areas respectively.


In the "Name" field of the "Hero" plugin, the following injectors can be used:

Image & caption

A randomized 4:3 image from Picsum


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Image only

A randomized 1:1 image from Picsum

Caption only

No image

Lorem ipsum dolor sit amet, consectetur Virginia Commonwealth University adipiscing elit. Nulla tristique quam in purus eleifend maximus. Nullam sed magna eget leo consequat faucibus in vitae magna.