Hero

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.

Markup

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.

Javascript

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.

Areas

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:

• Feature - Moves the hero to the feature area of the page (below the main navigation, above the sidebars and main content).
• Sidebar - Moves the hero to the sidebar area of the page (right of the main content).
• Footer - Moves the hero to the footer area of the page (above the footer, below the sidebars and main content).

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.

Injectors

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

• id:{custom_id} - Overrides the default, T4 ID of the hero with a custom ID.
• blur:{false} - Disables the blurred background of the hero.
• float:{false} - Disables the hero's caption from floating.
• caption:{top,left,right,blur} - Changes where and how the hero's caption appears. Can be one or more lowercase, space separated keywords:
  • top - Moves the caption to the top of the hero.
  • left - Moves the caption to the left of the hero.
  • right - Moves the caption to the right of the hero.
  • blur - Blurs the caption's background.
• class:{custom_classes} - Adds custom classes to the hero.
• style:{custom_styles} - Adds custom styles to a style attribute of the hero.
• before:{custom_html} - Adds custom HTML before the hero.
• after:{custom_html} - Adds custom HTML after the hero.

Image & caption

Image only

Caption only