About

hero is a styling attribute for showcasing hero unit style content.

An hero is just a UX design term that refers to an oversized component such as:

• the section of a landing page
• a page content header

They adds extra emphasis (attention) to their content by adding large padding space around it.

Syntax

<component hero="sm|md|lg|xl|none" />

where the value is one of:

• sm : small
• md : medium
• lg : large
• xl : extra-large
• none: to disable it

The hero attribute sets:

• automatically a padding (space around the text)
• that is responsive

Component Support

The component that naturally will accept the hero attribute are:

• the jumbotron
• the bar