- Taxonomic name: M-LONG-FORM-HERO
- Extension: LONG-FORM-ARTICLE
- Current owner: Framework
- Added on: v5.1.0 (03/11/20)
- Updated on: v5.8.0 (15/06/21)
Long form hero
Adds a layer of interaction and delight to a predominantly static article page. The fixed hero renders to the full size of the browser viewpoint, the chapter sections emerge and roll over the fix background image on scrolling. When selecting and implementing the hero image, please follow our photography guidelines to ensure the visual standards adhered.
Design and usage
Structure
- Fixed hero component, fills 100% of the browser viewport
- The hero should contain the image, heading, subheading and breadcrumb
-
Image
- Fixed hero image, renders 100% of the browser viewport
- The default image should always be 3200px x 1800px (using 16:9 ratio) to ensure full browser compatibility
- Page scrolls over the fixed hero
- Include image focus option (right, centre, left) for tablet and mobile cropping; defaults to center
Headings
- All text sizes and placement as per existing hero component
Accessibility and screen readers
- Image/text contrast in-line with pre-existing WCAG guidelines and established Framework components
Non-JS requirements and considerations
- No fade or parallax on scroll; behaves as per standard hero
Placement
- Top of page, first compnent after the masthead
Use case and exception scenarios
- Heading and sub-heading are mandatory as per existing Framework guidance for the article template page
- Refer to the photography style guide for comprehensive visual design rules
- No call to action functionality within the long-form article hero
Design notes
- The hero image should have a 30% #333 overlay to ensure that the hero message is legible over the picture
- Responsive design for desktop, tablet and mobile
- On scroll, hero image blurs to create the background to the chapter dividers
- The hero text lock-up will scroll up in-time with page scroll
Examples
Hero with inline image
Interactive example
Code example
Hero with inline picture element (recommended)
<div class="m-long-form-hero" data-module="m-long-form-hero" data-module-load="true">
<div class="m-hero-wrapper">
<div class="m-hero m-hero--text-align-left t-accent-dark m-hero--objectfit" data-module="u-objectfit">
<picture class="m-hero__image u-lazyload" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<source type="image/webp" srcset="..." data-srcset="..." media="..." />
<img src="..." data-src="..." decoding="async" width="..." height="..." alt="" />
<meta itemprop="url" content="..." />
</picture> <!-- Insert optional breadcrumb here --> <div class="m-hero-message">
<div class="m-hero-message__text">
<!-- Insert optional wayfinder here -->
<h1 class="a-heading a-heading--0 a-heading--semibold" itemprop="name">...</h1>
<p class="m-hero__sub-heading a-heading a-heading--2 a-heading--light" itemprop="headline">...</p>
</div>
</div>
</div>
</div>
</div>Hero with inline image
<div class="m-long-form-hero" data-module="m-long-form-hero" data-module-load="true">
<div class="m-hero-wrapper">
<div class="m-hero m-hero--text-align-left t-accent-dark m-hero--objectfit" data-module="u-objectfit">
<div class="m-hero__image" itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="..." decoding="async" width="..." height="..." alt="..." />
</div> <!-- Insert optional breadcrumb here --> <div class="m-hero-message">
<div class="m-hero-message__text">
<!-- Insert optional wayfinder here -->
<h1 class="a-heading a-heading--0 a-heading--semibold" itemprop="name">...</h1>
<p class="m-hero__sub-heading a-heading a-heading--2 a-heading--light" itemprop="headline">...</p>
</div>
</div>
</div>
</div>
</div>Hero with background image
Interactive example
Code example
<div class="m-long-form-hero" data-module="m-long-form-hero" data-module-load="true">
<div class="m-hero-wrapper">
<div class="m-hero m-hero--text-align-left t-accent-dark [ background image class ]">
<div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
<meta itemprop="url" content="..." />
</div> <!-- Insert optional breadcrumb here --> <div class="m-hero-message">
<div class="m-hero-message__text">
<!-- Insert optional wayfinder here -->
<h1 class="a-heading a-heading--0 a-heading--semibold" itemprop="name">...</h1>
<p class="m-hero__sub-heading a-heading a-heading--2 a-heading--light" itemprop="headline">...</p>
</div>
</div>
</div>
</div>
</div>Development and test
Notes for developers
The component should be set up as per standard hero banner specifications and markup, with the only difference the addition of the m-long-form-hero outer wrapper with the appropriate data-module attribute. See hero banner for more information.
The standard markup for heroes with inline images can also be used; in this instance, use the wrapper as described above, but leave the m-hero--objectfit class and data-module="u-objectfit" attribute off the m-hero div.
Breadcrumb
A gradient is placed behind the breadcrumb to increase the text contrast against the image background in order to preserve legibility; this gradient should be preserved even if an image appears fine, as areas of mixed contrast may become an issue as screen size is reduced. If, however, you are certain that this will not be an issue, then the class .m-hero--no-gradient can be added to drop the gradient.
Extension component
This component forms part of the 'long-form-article' extension and uses other extension components so requires an additional stylesheets to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/heroes.css" rel="stylesheet" />
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/long-form-article.css" rel="stylesheet" />
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/supporting-navigation.css" rel="stylesheet" />Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-long-form-hero |
Container for long form hero | Yes | div |
Component releases
- Added on: v5.1.0 (03/11/20)
- Updated on: v5.8.0 (15/06/21)
Latest update:
- updated: Support for inclusion of a full breacrumb within the hero area has now been added to maintain cross site navigation consistency when using the a breadcrumb at the top of pages instead of the now deprecated footer variant of the breadcrumb.
- fixed: Fix for double dark overlay being applied to the hero when JavaScript is loaded.