A lightweight, responsive header component used for showcasing hero unit style content.

Here’s an example of a basic header component. Usually, this component is used on homepages and landing pages and has an attractive background image.

Color Variants

You can set the style of a <IHeader> using the color property.

Size Variants

You're able to use the size modifier to control the size of your header, using one of the available sizes: sm, md, and lg. The default size is set to md.


You can make headers cover the whole screen width and height (using vw and vh) by adding the fullscreen property. The width and height do not overflow the size of the parent container.

Cover Background

The goal of cover background images on a website is to cover the entire browser window at all times. Simply set a background for the header



Design Tokens