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.
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
The background color can also be changed.
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.
The position of the content can be centered with the
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