Hero Sections

3 Sections


Hero section is a component which is placed on the top of the page. It contains an introduction (on-boarding) for the page content to give an overall idea about the page content and purpose.

Common Use Cases:

  1. As Introduction for inner and landing pages.



Horizontal whitespaces:

  • No.1: 220px.
  • No.2: 20px.
  • No.3: 20px.
  • No.4: 30px.
  • No.5: 220px.

Vertical whitespaces:

  • No.6: 220px.
  • No.7: 20px.


  • Page Title: 24px.
  • Heading: 52px.
  • Content: 18px.

Types and Styles

Hero Section could be placed in many different styles depending on the portal nature and it’s elements. It could be an image mixed with a solid brand color, gradients or even with an artwork that is placed on one side.