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:
.cwf-hero--caption-left
- Moves the caption horizontally to the left.cwf-hero--caption-right
- Moves the caption horizontally to the right.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 astyle
attribute of the hero.before:{custom_html}
- Adds custom HTML before the hero.after:{custom_html}
- Adds custom HTML after the hero.