Hero

Undraw My Documents

Hero

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:

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:

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 My Documents
ComboStrap Styling - Emphasis

This article shows you how you can add emphasis on component in your page
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...
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