Undraw My Documents


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:

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


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

Component Support

The component that naturally will accept the hero attribute are:

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Related HowTo's
Landing Template Value
How to create a landing page?

This article shows you how to create a landing page with the markup component A landing page is a page with big horizontal sections that shows off your product or services. For your page, you should...

Recommended Pages
Undraw Website Builder Re Ii6e
A bar - A horizontal region

They are use to slice a page into section
Undraw Website Builder Re Ii6e
ComboStrap UI - Jumbotron

A jumbotron is a default Hero unit that emphase prominently its content. buttonleadtexthorizontal rule A jumbotron is a hero unit style content with a medium value by default where: the Hero...
Undraw My Documents
How to add emphasis in your website (ComboStrap)

This article shows you how you can add emphasis on component in your page
Layout Element
Main Header Element / Hero

The main header is a template element that is located on top of your content (main element). It's also known as a hero header in design. It is generally shown prominently to grab the attention of...
Main Header Slot Manager
Main Header Slot

The main header slot is a slot that will replace the default main header of your template. Below is an example of main header. where: breadcrumb is the hiearchical breadcrumb box is a box with...

Task Runner