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
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: