Hero

Import

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 and ml-container--fluid
• A main content area: mc-hero__main
• An image covering the background of the component: mc-hero__cover

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 container
• ml-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 title

The title of your component must be a Mozaic's Heading and must therefore have the following structure:

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.

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.

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 global mc-hero wrapper.
• also add the mt-heading--center modifier to the mt-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.

With a fixed container