Skip to main content
Version: 2.0.0

Hero

A hero is a large HTML container composed of several elements, often displayed at the beginning of the page in order to attract the user's attention.

Basic usage

A Hero can contain different elements like a title .ms-hero-title, a subtitle .ms-hero-subtitle, various content .ms-hero-content or a background .ms-hero-background.

Live Editor
Result
Loading...

Colors

The background color can also be changed.

Live Editor
Result
Loading...

Size

Several sizes are also available. The .ms-half-screen class allows to take half of the screen, and the .ms-full-screen class the whole screen.

Live Editor
Result
Loading...

Body Position

The position of the content can be centered with the .ms-center class.

Live Editor
Result
Loading...

Background and Cover

Finally, it is possible to add a background image with the .ms-hero-background class, and also add a cover with the .ms-hero-cover class.

Live Editor
Result
Loading...