Hero
Import
@import 'settings-tools/all-settings';@import 'typography/_t.all-base-typography';@import 'layouts/l.container';@import 'layouts/l.flexy';@import 'components/c.hero';
Basic usage
In its simplest form, the Hero component consists of the following elements:
- A global wrapper with the class:
mc-hero
- A container with the classes:
ml-container
andml-container--fluid
- A main content area:
mc-hero__main
- An image covering the background of the component:
mc-hero__cover
<div class="mc-hero"> <div class="ml-container ml-container--fluid"> <div class="ml-flexy ml-flexy--gutter"> <div class="mc-hero__main ml-flexy__col"> <picture class="mc-hero__cover"> <img class="mc-hero__visual" src="https://m1.lmcdn.fr/media/15/5e611393475ea771bbbad626/2872342965/greenkub-maison-sans-permis5e611393063b330009a4a405.jpg?width=800&crop=16:9,smart" alt="" /> </picture> <h1 class="mc-hero__title mt-heading mt-heading--lightest mt-heading--s mt-heading--underline" > Hero title </h1> </div> </div> </div></div>
Elements detail
The container
The container div allows you to use the Hero component in its fixed or fluid version by applying the following classes:
ml-container
: for a fixed containerml-container ml-container--fluid
: for a fluid container
For more details on the behaviour of the Mozaïc container, do not hesitate to consult the documentation dedicated to it.
The main content area
The main content area (mc-hero__main
) is the area where the cover image of your component and the component title are located.
It is also possible to add text content within this area.
The titleThe title of your component must be a Mozaic's Heading and must therefore have the following structure:
<h1 class="mc-hero__title mt-heading mt-heading--lightest mt-heading--s mt-heading--underline"> Hero title</h1>
Note that the Heading you use in the Hero component must always be an underlined heading.
The text content
The text content must be inserted in a mc-hero__content
div with the additional mt-body-m
class.
<div class="mc-hero__content mt-body-m"> <!-- Insert your content here --></div>
The background
As you saw in the previous section, the background coverage image of the Hero component must be within the mc-hero__main
area.
This background is an HTML element <picture>
with the class mc-hero__cover
.
It contains an HTML element <img />
with the class mc-hero__visual
.
<div class="mc-hero__main ml-flexy__col"> <picture class="mc-hero__cover"> <img class="mc-hero__visual" src="https://m1.lmcdn.fr/media/15/5e611393475ea771bbbad626/2872342965/greenkub-maison-sans-permis5e611393063b330009a4a405.jpg?width=800&crop=16:9,smart" alt="" /> </picture> <!-- After the picture element, you can insert the title and the content of your component --></div>
The HTML Picture element allows you to load multiple image sources for different display/device scenarios.
Learn more about it on MDN Documentation
Variations
The Hero component comes with several variations allowing you to cover different use cases.
Title only
This is the most minimal Hero case.
Title with text content (recommended)
This is the most common Hero case we recommend to use.
This version is made of a headline, a text content and a background image.
When using this variation, you need to add the mc-hero--with-content
modifier to the global mc-hero
wrapper.
Centered hero
You have the ability to center the main content of your Hero component.
To do this:
- add the
mc-hero--center
modifier to the globalmc-hero
wrapper. - also add the
mt-heading--center
modifier to themt-heading
title element.
Title with text and boxed content
In specific cases, you need to take some content apart of the overall page layout, to put a feature forward for example.
Therefore you have the possibility to use a secondary content area within your component.
This secondary content area (boxed content) should be inserted directly after the mc-hero__main
element in a div mc-hero__boxed
.
You also need to add the mc-hero--with-boxed
modifier to the global mc-hero
wrapper for optimal rendering.
<div class="mc-hero mc-hero--with-boxed"> <div class="ml-flexy ml-flexy--gutter"> <div class="mc-hero__main ml-flexy__col"> <!-- Find here the elements mc-hero__cover, mc-hero__title and mc-hero__content --> </div> <div class="mc-hero__boxed ml-flexy__col"> <!-- Insert here your secondary content --> </div> </div></div>
When using the mc-hero--with-boxed
modifier, be careful not to apply in addition the mc-hero--with-content
modifier to the mc-hero
element.
Indeed the mc-hero--with-boxed
modifier manages the boxed content but also manages the behavior of the title and the main content area.
When using a boxed content, you should be aware that it is positioned as follows:
- Below the breakpoint L (< 1024px), the boxed content will be positioned below the main content.
- From the breakpoint L and beyond (>= 1024px), the boxed content will be automatically positioned to the right of the main content.
In case you would like to keep the boxed content below the main content in L resolution, you can add the mc-hero--boxed-l
modifier to the global mc-hero
wrapper.
If you use this modifier, the boxed content will be positioned to the right of the main content only from the XL breakpoint (>= 1280px) and will therefore remain below the main content until this breakpoint is reached.